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 :

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

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!