vue-baidu-mapのページ入力後の自動位置決め方法の詳細説明

今回は、vue-baidu-map がページに入った後の自動位置決めを実装する方法について詳しく説明します。vue-baidu-map がページに入った後に自動位置決めを実装するための 注意事項 は何ですか。見てみましょう。

前に書いた：私は単なるフロントエンドの初心者であり、記事で言及されている内容には至らない点があるかもしれないので、参考程度に提供します。不備がございましたら、ご指摘いただけると幸いです。 ,お役に立てば幸いです!

さて、本題に入りましょう。実は私も以前この問題で悩んだことがあり、ネットで調べたのですが解決策が見つかりませんでした。私が思い切って GitHub で上司に問題を提起したのは今日になって初めてでした。それで目が覚めました。実際、それは私がすぐに成功することに熱心すぎて、vue-baidu-map が提供するリファレンス ドキュメントを注意深く読んでいなかったことが原因でした。あるいは、読んだだけで忘れてしまったのかもしれません。

まず最初に明確にしておきます (文書からの原文): Baidu Map JS API には JSONP という 1 つの読み込みメソッドしかないため、BaiduMap コンポーネントとそのすべてのサブコンポーネントのレンダリングは非同期でのみ行うことができます。したがって、マップ API がロードされた後にのみ実行できるコードを実行するには、コンポーネントの Ready イベントを使用してください。このような時点でモデル レイヤーを変更することはもちろん、vue 自体の

ライフサイクル で BMap クラスを呼び出そうとしないでください。

間違った使い方

私が試してみたところ、上記の方法は実行可能で効果が見られるようですが、作者が提供する正しい方法を使用する方が良いでしょう！

正しい使い方

この方法をオススメします！ページ入力時の自動配置の問題を解決する次の方法もここにあります。

以下は私の書き方です。参考程度にしてください。欠点があればご指摘ください。私はただの初心者です（笑）！

テンプレート:

<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 実装:

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

コードを直接コピーする場合は、すべてのコードを投稿していないため、選択的にコピーする必要があることに注意してください。コードをプロジェクトに直接コピーすると問題が発生します。ただし、このコードは比較的単純なので、少し努力すれば理解できます (笑)。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue ポップアップ メッセージ コンポーネントを使用する手順の詳細な説明

角度ルーティングの強調表示の実装手順の詳細な説明

以上がvue-baidu-mapのページ入力後の自動位置決め方法の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。