1、百度舆图api的使用
1）申请百度账号和ak
2）引用百度舆图API文件
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
3）获取当前位置的经纬度
//获取当前位置的经纬度 getCurrentPosition:function(context,params){ //navigator.geolocation部分离机有权限问题 Vue.prototype.$common.showLoading(‘正在获取当前位置‘); //使用百度舆图api获取当前位置每次进入处事号都需要授权 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ Vue.prototype.$common.hideLoading(); var pos={ longitude:r.point.lng+‘‘, latitude:r.point.lat+‘‘ } context.commit(‘setCurrentPosition‘,pos); if(params.callback){ params.callback(); } }else { Vue.prototype.$common.hideLoading(); weui.alert(‘获取当前位置掉败‘); } },{enableHighAccuracy: true}); }
4）展示舆图
百度舆图API中的大部分东西都含有addEventListener要领，，您可以通过该要领来监听东西事件。
mounted:function(){ var self=this; this.$common.httpPost(‘userRegisterPre.do‘,{},function(response){ self.user=response.User; //deptseq store.dispatch(‘getCurrentPosition‘,{callback:setMap}); function setMap(){ var map = new BMap.Map("map"); var currentPosition=store.state.glob.currentPosition; var point = new BMap.Point(currentPosition.longitude, currentPosition.latitude); map.centerAndZoom(point, 12); var me = new BMap.Icon("images/current-pos.png", new BMap.Size(32,32)); var meMarker = new BMap.Marker(point,{icon:me});//创建标注 map.addOverlay(meMarker); var DeptList=store.state.glob.deptList,pointArray=[]; for(var i=0;i<DeptList.length;i++){ var item=DeptList[i]; if(item.deptseq==response.User.deptseq){ self.dept=item; } var deptPoint=new BMap.Point(item.Longitude, item.Latitude); var marker = new BMap.Marker(deptPoint);//创建点 map.addOverlay(marker);//增加点 pointArray.push(deptPoint); marker.addEventListener("click",(function(i){ return function(){ self.dept=DeptList[i]; self.showedMap=false; } })(i)); //通过闭包为多个点注册点击事件 var label = new BMap.Label(item.Deptname,{offset:new BMap.Size(20,-10)}); marker.setLabel(label); self.showedMap=false; } } }); },
5）舆图带检索成果的信息窗口
引入js和css：
<script src="http://www.mamicode.com/https:/api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link href="http://www.mamicode.com/https:/api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
setDeptList:function(){ var self=this; this.$common.httpPost(‘queryBankDeptList.do‘,{},function(response){ var DeptList=response.DeptList; self.deptList=DeptList; for(var i=0;i<DeptList.length;i++){ var item=DeptList[i]; var deptPoint=new BMap.Point(item.Longitude, item.Latitude); var marker = new BMap.Marker(deptPoint);//创建点 self.map.addOverlay(marker);//增加点 var label = new BMap.Label(item.Deptname,{offset:new BMap.Size(20,-10)}); marker.setLabel(label); DeptList[i].marker=marker; var content=‘<p>地点：‘+item.addr+‘</p>‘; content+=‘<p>客户经理：‘+item.contactname+‘</p>‘; var telStr=‘<a href="http://www.mamicode.com/tel:‘+item.phone+‘">‘+item.phone+‘</a>‘; content+=‘<p>联系方法：‘+telStr+‘</p>‘; DeptList[i].searchInfoWindow = new BMapLib.SearchInfoWindow(self.map, content, { title : item.Deptname+‘社区支行‘, //标题 width : 290, //宽度 height : 80, //高度 panel : "panel", //检索功效面板 enableAutoPan : true, //自动平移 searchTypes :[ //BMAPLIB_TAB_SEARCH, //周边检索 //BMAPLIB_TAB_TO_HERE, //到这里去 //BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); marker.addEventListener("click",(function(i){ return function(){ DeptList[i].searchInfoWindow.open(DeptList[i].marker); } })(i)); } }); },