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中文网其他相关文章！