1. 程式人生 > 實用技巧 >vue專案使用百度地圖API獲取經緯度

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