So geben Sie die Vue-Baidu-Map in die Seite ein und positionieren sie automatisch

Dieses Mal zeige ich Ihnen, wie Sie Vue-Baidu-Map automatisch positionieren, wenn Sie die Seite betreten. Was sind die Vorsichtsmaßnahmen für die automatische Positionierung, wenn Vue-Baidu-Map die Seite betritt? ist ein praktischer Fall.

Tatsächlich hatte ich schon einmal Probleme mit diesem Problem, ich habe auch online nachgeschaut und konnte 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('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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Vue-Komponente, um ein Popup-Fenster zu implementieren. Zum Ein- und Ausblenden klicken Sie darauf

Wie um die Vue-Popup-Nachrichtenkomponente zu verwenden

Das obige ist der detaillierte Inhalt vonSo geben Sie die Vue-Baidu-Map in die Seite ein und positionieren sie automatisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!