WeChatミニプログラムマップの使い方を詳しく解説

<!-- マップセクション -->
  <!-- enable-traffic 交通状況を表示する -->
  <view class="map_container">
   <map id='customerMap' class="map" :longitude='経度' :latitude='緯度' :scale='スケール'
    :markers='マーカー' :controls="コントロール" 場所を表示
    @markertap="マーカータップ" @updated="更新されたマップ" @controltap='bindcontroltap'></map>
</ビュー>

データ（）{
  戻る {
      緯度:23.140962248、
      経度:113.305301124、
      スケール:12,
      マーカー:[ {id: '',
     緯度: 23.140962248,
     経度: 113.305301124、
     iconPath: '../static/select-dw.png', //現在の場所のアイコンパスの幅: 25,
     高さ: 39,
     },
                    {
                    緯度: 23.129742,
     経度: 113.26754、
     iconPath: '../static/mark.png', //顧客アイコンパスの幅: 28,
     高さ: 28,
     ラベル: {
      内容:「チャン・ジュンジュン」
      テキスト配置: 'center'、
      フォントサイズ: 12
        }
                    }]  
 
  }
 
},
準備完了() {
 this.mapCtx = wx.createMapContext('customerMap')
},
方法:{
 
    // マーカーポイントをクリック markertap(e) {
    { markerId } = e.detail とします。
    item = this.markers.find(v => v.id === markerId); とします。
    console.log('アイテム', アイテム)
    uni.openLocation({
     緯度: 数値(item.緯度)、
     経度: 数値(item.経度)、
     名前: item.label.content,
     住所: アイテム.アドレス、
     成功: 関数() {
      console.log('成功');
     }
    });
   },
    // マップがロードされたら、updatedmap() をトリガーします {
    this.mapUpdated = true;
    console.log('実行')
    this.includePoints(); //すべての顧客がビューに表示されます},
    // マーカーポイントをマップ上に表示する includePoints() {
    const that = this
    定数ポイント = [{
     緯度: that.latitude、
     経度: that.longitude
    }];
    this.markers.forEach(item => {
     定数オビ = {
      緯度: 項目.緯度、
      経度: item.longitude
     }
     ポイント.push(obi)
    })
    this.mapCtx.includePoints({
     パディング: [80, 50, 80, 50],
     ポイント
    })
   },
}