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

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

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

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

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

錯誤用法

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

正確用法

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

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

Template：

d477f9ce7bf77f53fbcf36bec1b69b7a
  2671d65c4ea3ef15465f6e65e94ab9db
    82115b0f4d86e34650abf6bc49088284
    54ab1b5c2eb4cb7591b51df9d46be330
    26c0e5f30144c9d88ee0b242b91c55a4
    0f99f12c2ed8dc35b86bb3dc59b7b907
    9904e77b51de944eae2ebf1cdd4ebf4b
  974eebcdcfab19e720ba2224c076d1a3
21c97d3a051048b8e55e3c8f199a54b2

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中文網其他相關文章！