Detailed explanation of vue-baidu-map's automatic positioning method after entering the page

This time I will bring you a detailed explanation of the automatic positioning method of vue-baidu-map after entering the page. What are the precautions for vue-baidu-map to realize automatic positioning after entering the page. The following is a practical case. , let’s take a look.

Written before: I am just a front-end novice, and what is mentioned in the article may have shortcomings, so I only provide a reference. If there are any imperfections, you are welcome to point them out! ,Hope it helps you!

Okay, let’s get to the point. In fact, I have been troubled by this problem before, and I checked online but 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(&#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>

If you copy the code directly, please note that you must copy selectively because I have not posted all the code. , copying directly to your project will cause problems! However, this code is relatively simple and can be understood with a little effort, haha!

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:

Detailed explanation of the steps to use the vue pop-up message component

Detailed explanation of the implementation steps of angular routing highlighting

The above is the detailed content of Detailed explanation of vue-baidu-map's automatic positioning method after entering the page. For more information, please follow other related articles on the PHP Chinese website!