Angular/Vue調用百度地圖+標注點不顯示圖標+多標注點計算地圖中心位置

整理一下~

 

一、在vue中調用百度地圖

首先當然是申請百度密匙（很簡單，不多說）

1、在index.html文件中引入百度地圖JavaScript API接口：

 

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= 密匙部分哦"></script>

2、在bulid/webpack.base.conf.js配置文件中配置BMap，在module.exports 中與entry平級

3、在地圖組件中import BMap：

import BMap from 'BMap'

4、創建容器，用來顯示百度地圖，注意給高寬

5、還有一個比較好用的白兔地圖生成器，可以實現基本的需求吧，標路線之類的我還沒有用過，這兒沒有。

http://api.map.baidu.com/lbsapi/creatmap/index.html

這個生成器可以生成代碼，有些注釋，一目了然。不過多介紹了。

 

二、在Angular中調用百度地圖

一樣的在index.html文件中引入百度地圖JavaScript API接口，如上。基本的就不多說了

 

下面記錄一下過程中的問題：

一、標注點的圖標不顯示

即，標注點顯示在地圖中，但是綠色的水滴形標記未能顯示。在生成器中的代碼主要是這幾行：

 

 

 查了一下，我這邊的原因是圖片地址不對，更換圖片地址后就正確了。

圖片地址改為如下就可以成功顯示了：

http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png

 

 二、另一個大問題就是代碼中會有一個中心點經緯度，設置這個中心點的經緯度之后可能就會有部分標注點不能夠在容器范圍中展示

加入如下方法：

 function getZoom (maxLng, minLng, maxLat, minLat) {  
        var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//級別18到3。  
        var pointA = new BMap.Point(maxLng,maxLat);  // 創建點坐標A  
        var pointB = new BMap.Point(minLng,minLat);  // 創建點坐標B  
        var distance = map.getDistance(pointA,pointB).toFixed(1);  //獲取兩點距離,保留小數點后兩位  
        for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {  
            if(zoom[i] - distance > 0){  
                return 18-i+2;//之所以會多3，是因為地圖范圍常常是比例尺距離的10倍以上。所以級別會增加3。  
            }  
        };  
    } 
    function setZoom(dataArr){ 
        var lnglat=[{
            lng:"",
            lat:''
        }];
      
        if(dataArr.length>0){   
           console.log('lll')
            lnglat[0].lng = dataArr[0].point.split("|")[0];
            lnglat[0].lat = dataArr[0].point.split("|")[1];
            console.log( lnglat[0].lng);
            var maxLng = lnglat[0].lng;  
            var minLng = lnglat[0].lng;  
            var maxLat = lnglat[0].lat;  
            var minLat = lnglat[0].lat;  
            var res;  
            
            console.log('aaabbbb')
            for (var i = dataArr.length-1; i >= 0; i--) {  
               console.log('dataArr')
                lnglat[0].lng = dataArr[i].point.split("|")[0];
                console.log(lnglat[0])
                lnglat[0].lat =dataArr[i].point.split("|")[1];
                res = lnglat[0];  
                if(res.lng > maxLng) maxLng =res.lng;  
                if(res.lng < minLng) minLng =res.lng;  
                if(res.lat > maxLat) maxLat =res.lat;  
                if(res.lat < minLat) minLat =res.lat;  
            };  
            console.log('dffdsssdf')
            var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;  
            var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;  
            var zoom = getZoom(maxLng, minLng, maxLat, minLat);  
            map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);    
        }else{  
            //沒有坐標，顯示全中國  
            map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);    
        }   
    } 

然后調用，就可以實現計算出中心點，和縮放程度了，點多了基本也沒有問題。

這就是我目前，調地圖的一些記錄。代碼就不逐行在這里介紹了。百度地圖API的開放文檔里有很多資料~

地址貼下面吧，也方便我自己 日后復習：http://lbsyun.baidu.com/index.php?title=jspopular