Explication détaillée de la méthode de positionnement automatique de vue-baidu-map après être entré dans la page

Cette fois, je vais vous apporter une explication détaillée de la façon dont vue-baidu-map implémente le positionnement automatique après être entré dans la page. Quelles sont les précautions pour que vue-baidu-map implémente le positionnement automatique après être entré dans la page. page. Voici des cas pratiques, jetons un oeil.

Écrit auparavant : je ne suis qu'un novice en front-end, et il peut y avoir des lacunes mentionnées dans l'article, je ne fournis donc qu'une référence. S'il y a des imperfections, n'hésitez pas à les signaler ! , j'espère que cela vous aidera !

Bon, allons droit au but. En fait, j'ai déjà été gêné par ce problème et j'ai vérifié en ligne mais je n'ai pas trouvé de solution. Ce n'est qu'aujourd'hui que j'ai pris la liberté de soulever un problème avec le patron sur GitHub, et cela m'a réveillé. En fait, c'était parce que j'étais trop avide de succès rapide et que je n'avais pas lu attentivement la documentation de référence fournie par vue-baidu-map. Ou peut-être que je l'ai lu et que je l'ai ensuite oublié !

Tout d'abord, soyons clairs (mots originaux du document) : Puisque l'API Baidu Map JS n'a qu'une méthode de chargement JSONP, le rendu du composant BaiduMap et de tous ses sous-composants ne peut être qu'asynchrone. . Par conséquent, veuillez utiliser l'événement ready du composant pour exécuter du code qui ne peut être exécuté qu'après le chargement de l'API de la carte. N'essayez pas d'appeler la classe BMap dans le propre cycle de vie de vue, et encore moins de modifier la couche de modèle à. ces temps-là.

Utilisation incorrecte

Je l'ai essayé, et la méthode ci-dessus semble réalisable et l'effet peut être vu, mais nous ferions mieux d'utiliser la bonne méthode fournie par l'auteur !

Utilisation correcte

Cette méthode est recommandée ! La méthode suivante pour résoudre le problème du positionnement automatique lors de la saisie de la page est également ici.

Voici comment je l'écris, à titre de référence seulement. Veuillez signaler s'il y a des lacunes, je ne suis qu'un novice, haha !

Modèle :

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

Implémentation 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>

Si vous copiez le code directement, veuillez noter que vous devez copier de manière sélective, car je n'ai pas copié tout Le code est publié, mais le copier directement dans votre projet posera des problèmes ! Cependant, ce code est relativement simple et peut être compris avec un petit effort, haha !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation du composant de message contextuel vue

Explication détaillée de les étapes pour mettre en œuvre la mise en évidence du routage angulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!