vue項目使用百度地圖API獲取經緯度

一、首先在百度api注冊獲得ak密鑰

二、進行引入

　　(1)、第一種方式：
　　　　直接在vue中index.html中用script標簽引入。

//你的ak密鑰需要替換真實的你的ak碼
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>

　　(2)、第二種方式：

　　　　新建js文件，我命名為loadResources，里面創建script

// 這段代碼寫在js文件里
export function loadBMap(funcName) {
    var script = document.createElement("script");
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI&callback=" + funcName;
    document.body.appendChild(script);
}

三、運用到具體文件中

　　第二種方式需要在你用到的地方進行引入文件

//根據你文件的真實路徑引入
import {loadBMap} from '../loadResources'

created() {
    window.initBaiduMapScript = () =>{
        console.log(BMap);
        this.getlocation();
    }
    loadBMap('initBaiduMapScript');
},
methods:{
    getlocation(){this.$nextTick(function(){
        try{
           const geolocation =new BMap.Geolocation();
           geolocation.getCurrentPosition(function(r){
              console.log(r,"aaaa");
              if(this.getStatus() == BMAP_STATUS_SUCCESS){
                 const{lat =null, lng=null} = r.point;
              }
           });
        }catch(e){
           console.log(e)
        }
      })
   }
}

　　因為我們不需要地圖效果，因此只需要獲取到經緯度就好，這邊執行完就已經可以獲取到經緯度了。
　　在控制台區域可以看到我們打印出來的console.log(r,“aaaa”);證明已經獲取成功。

四、如果需要地圖效果

1、如果需要地圖效果或者其他形式都可以參考百度地圖開放平台里的示例demo
創建一個容器，當然初始的ak密鑰script還是需要的

// 以下代碼直接復制的百度地圖api
<div id="allmap"></div>

<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
</script>

五、百度api文獻參考

       Javascript API