Comment faire en sorte que vue-baidu-map entre dans la page et la positionne automatiquement

Cette fois, je vais vous montrer comment faire en sorte que vue-baidu-map se positionne automatiquement lors de l'entrée dans la page. Quelles sont les précautions pour le positionnement automatique lorsque vue-baidu-map entre dans la page. est un cas pratique. Jetons un coup d'œil.

En fait, j'ai déjà été troublé par ce problème. J'ai également vérifié en ligne et 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('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>

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. faites attention aux autres sujets connexes dans l'article du site Web chinois php !

Lecture recommandée :

Comment utiliser le composant vue pour implémenter une boîte contextuelle, cliquez pour afficher et masquer

Comment pour utiliser le composant de message pop-up vue

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!