How to make vue-baidu-map enter the page and automatically position it

This time I will show you how to make vue-baidu-map automatically position itself when entering the page, and vue-baidu-map enters the page to automatically position itself. What are the precautions? take a look.

Actually, I have been troubled by this problem before. I also checked online and couldn't find a solution. It wasn't until today that I took the liberty to raise an issue with the boss on GitHub, and it woke me up. In fact, it was because I was too eager for quick success and did not carefully read the reference documentation provided by vue-baidu-map. Or maybe I read it and then forgot about it!

First of all, let’s be clear (original words from the document): Since the Baidu Map JS API only has one loading method: JSONP, the rendering of the BaiduMap component and all its sub-components can only be asynchronous. Therefore, please use the component's ready event to execute code that can only be executed after the map API is loaded. Do not try to call the BMap class in vue's own

lifecycle, let alone modify the model layer at these times.

Incorrect usage

I have tried it, and the above method seems to be feasible and the effect can be seen, but we'd better use the correct method provided by the author!

Correct usage

This method is recommended! The following method to solve the problem of automatic positioning when entering the page is also here.

The following is my writing method, for reference only. Please point out if there are any shortcomings, I am just a novice, haha!

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 implementation:

<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('center:', _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('您的位置：'+r.point.lng+','+r.point.lat);
        // }
        // else {
        //   alert('failed'+this.getStatus());
        // }
        // },{enableHighAccuracy: true})
      }
    }
  }
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the vue component to implement the pop-up box click to show and hide

How to use the vue pop-up message component

The above is the detailed content of How to make vue-baidu-map enter the page and automatically position it. For more information, please follow other related articles on the PHP Chinese website!