vue-baidu-map實現進入頁面後自動定位方法詳解

這次帶給大家vue-baidu-map實現進入頁面後自動定位方法詳解，vue-baidu-map實現進入頁面後自動定位的注意事項有哪些，以下就是實戰案例，一起來看一下。

寫在前面：我只是一個前端小白，文章中的提到可能會有不足之處，只提供一個參考。若有不完善的地方，歡迎各位大佬指出！ ，希望對你有幫助！

好了，入正題。其實之前也被這問題困擾過，在網路上也查了一番，沒找到解決方法。直到今天，在GitHub 冒昧地向大佬提了一個 issue，才點醒了我。其實是因為太過急功近利了，沒有認真閱讀 vue-baidu-map 提供參考文檔，也有可能是看過然後忘記了！

首先要明確一點（文檔原話）：由於百度地圖 JS API 只有 JSONP 一種載入方式，因此 BaiduMap 元件及其所有子元件的渲染只能是異步的。因此，請使用在元件的 ready 事件來執行地圖 API 載入完畢後才能執行的程式碼，不要試圖在 vue 自身的生命週期中呼叫 BMap 類，更不要在這些時機修改 model 層。

錯誤用法

 我試過，以上這個方法好像是可行，效果可以出來，但我們最好採用作者提供的正確方法！

正確用法

 推薦這個方法！那下面解決進入頁面自動定位的方法也是在這裡。

 下面是我的寫法，僅供參考，有不足請指出，我只是一個小白，哈哈！

Template：

<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @load="loadding" :scroll-wheel-zoom="true"
    :mapStyle="{styleJson: styleJson}">
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true"
      :locationIcon="{url: require(&#39;../../svg/location.svg&#39;), size: {width: 18, height: 18}}" 
      @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
    </bm-geolocation>
    <!-- 自定义定位图标覆盖物 -->
    <bm-marker :position="autoLocationPoint"
      :icon="{url: require(&#39;../../svg/location.svg&#39;), size: {width: 18, height: 18}}" v-if="initLocation">
    </bm-marker>
  </baidu-map>
</template>

JS實作：

<script>
  export default {
    data () {
      return {
        // 省略一部分
        autoLocationPoint: {lng: 0, lat: 0},
        initLocation: false,
      }
    },
    methods: {
      handler ({BMap, map}) {
        let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};   // 自定义覆盖物
          _this.initLocation = true; 
          console.log(&#39;center:&#39;, _this.center)  // 如果这里直接使用this是不行的
        },{enableHighAccuracy: true})
        // 下面注释是百度地图API官方实现方法，因为我使用自定义图标覆盖物，所以没有使用这种方法！
        // 如使用以下这种方法，那么我Template里所写的自定义定位图标代码是不需要的
        // 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(&#39;您的位置：&#39;+r.point.lng+&#39;,&#39;+r.point.lat);
        // }
        // else {
        //   alert(&#39;failed&#39;+this.getStatus());
        // }
        // },{enableHighAccuracy: true})
      }
    }
  }
</script>

如果是直接複製程式碼的朋友請注意，要有選擇的複製，因為我沒有把全部程式碼貼出了，直接複製到你的專案是會出問題的！不過這程式碼比較簡單，稍微看得懂，哈哈！

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue彈窗訊息元件使用步驟詳解

#angular路由高亮之實作步驟詳解

以上是vue-baidu-map實現進入頁面後自動定位方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！