Detaillierte Erläuterung der automatischen Positionierungsmethode von vue-baidu-map nach dem Aufrufen der Seite

Dieses Mal werde ich Ihnen detailliert erklären, wie vue-baidu-map die automatische Positionierung nach dem Aufrufen der Seite implementiert Seite: Hier sind praktische Fälle, werfen wir einen Blick darauf. Zuvor geschrieben: Ich bin nur ein Front-End-Neuling und der Artikel erwähnt möglicherweise Mängel, daher gebe ich nur eine Referenz. Sollten dennoch Unvollkommenheiten vorhanden sein, können Sie uns gerne darauf hinweisen! , hoffe es hilft dir!

Okay, kommen wir zum Punkt. Tatsächlich hatte ich schon einmal Probleme mit diesem Problem und habe online gesucht, konnte aber keine Lösung finden. Erst heute habe ich mir die Freiheit genommen, ein Problem mit dem Chef auf GitHub anzusprechen, und das hat mich aufgeweckt. Tatsächlich lag es daran, dass ich zu sehr auf schnellen Erfolg bedacht war und die von vue-baidu-map bereitgestellte Referenzdokumentation nicht sorgfältig gelesen hatte. Oder vielleicht habe ich sie gelesen und sie dann vergessen!

Lass uns zunächst klarstellen (ursprüngliche Worte aus dem Dokument): Da die Baidu Map JS API nur über eine JSONP-Lademethode verfügt, kann das Rendern der BaiduMap-Komponente und aller ihrer Unterkomponenten nur asynchron erfolgen . Verwenden Sie daher bitte das Ready-Ereignis der Komponente, um Code auszuführen, der erst nach dem Laden der Karten-API ausgeführt werden kann. Versuchen Sie nicht, die BMap-Klasse im eigenen

Lebenszyklus

aufzurufen, geschweige denn die Modellebene zu ändern diese Zeiten.

Falsche Verwendung

Ich habe es ausprobiert und die obige Methode scheint machbar zu sein und die Wirkung ist sichtbar, aber wir sollten besser die richtige bereitgestellte Methode verwenden vom Autor!

Richtige Verwendung

Diese Methode wird empfohlen! Hier finden Sie auch die folgende Methode zur Lösung des Problems der automatischen Positionierung beim Aufrufen der Seite.

Das Folgende ist, wie ich es schreibe, nur als Referenz. Bitte weisen Sie darauf hin, wenn es irgendwelche Mängel gibt, ich bin nur ein Anfänger, haha!

Vorlage:

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

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

Wenn Sie den Code direkt kopieren, beachten Sie bitte, dass Sie selektiv kopieren müssen, da ich nicht den gesamten Code gepostet habe. Das direkte Kopieren in Ihr Projekt führt zu Problemen! Allerdings ist dieser Code relativ einfach und mit ein wenig Aufwand zu verstehen, haha!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung der Vue-Popup-Nachrichtenkomponente

Detaillierte Erläuterung von die Schritte zum Implementieren der Winkelrouting-Hervorhebung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der automatischen Positionierungsmethode von vue-baidu-map nach dem Aufrufen der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!