百度地图JS API

Posted 2020-10-14 Colorful_coco

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="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

<link rel="stylesheet" href="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="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));
        }
    });
},