本文例項為大家分享了微信小程式mhttp://www.cppcns.comap地圖使用的具體實現程式碼，供大家參考，具體內容如下

以下程式碼是主要的程式碼片段

<!-- 地圖部分 -->
  <!-- enable-traffic 顯示路況 -->
  <view class="map_container">
   <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='scale'
    :markers='markers' :controls="controls" show-location
    @markertap="markertap" @updated="updatedmap" @controltap='bindcontroltap'></map>
</view>

data(){
  return{
      latitude:23.140962248,longitude:113.305301124,scale:12,markers:[     {id: '',latitude: 23.140962248,longitude: 113.305301124,iconPath: '../static/select-dw.png',//當前位置圖示路徑
     width: 25,height: 39,},{
                    latitude: 23.129742,longitude: 113.26754,iconPath: '../static/mark.png',//客戶圖示路徑
     width: 28,height: 28,label: {
      content: '詹俊俊',textAlign: 'center',fontSize: 12
        }
                    }]  
 
 
  }
 
},onReady() {
 this.mapCtx = wx.createMapContext('customerMap')
},methods:{
 
    // 點選標記點
   markertap(e) {
    let { markerId } = e.detail;
    let item = this.markers.find(v => v.id === markerId);
    console.log('item',item)
    uni.openLocation({
     laLxgjzPIXeRtitude: Number(item.latitude),longitude: Number(item.longitude),name: item.label.content,address: item.address,success: function() {
      console.log('succe客棧
 
ss');
     }
    });
   },// 當地圖載入完成後觸發
   updatedmap() {
    this.mapUpdated = true;
    console.log('執行')
    this.includePoints(); //所有客戶顯示在檢視內
   },// 讓標記點在地圖可視視野內
   includePoints() {
    const that = this
    const points = [{
     latitude: that.latitude,longitude: that.longitude
    }];
    this.markers.forEach(item => {
     const obi = {
      latitude: item.latitude,longitude: item.longitude
     }
     points.push(obi)
    })
    this.mapCtx.includePoints({
     padding: [80,50,80,50],points
    })
   },}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。