在腾讯生态开发过程中，包含在微信小程序开发的时候，防止不了应用腾讯送的腾讯大礼包，从微信领取到腾讯地图，一条龙的腾讯大礼包，不得不说鹅厂的实力是无可比拟的。

然而话又说回来了，鹅厂的官网API真是不敢恭维，尤其是微信小程序的开发文档，如果不相熟的话，真的是大坑一直，连环坑一直，有力吐槽。

本篇博文来说说微信小程序开发的时候集成实现腾讯地图的性能，尽管微信官网API介绍了集成步骤，然而还是会给小白带来云里雾里的感觉，接下来就具体来说说具体的集成步骤，分享进去，若有不妥之处请斧正。

其实微信小程序还能够集成百度地图的，只是这里不再介绍其余家的地图集成到微信小程序的步骤。本案例间接把小程序的地图局部进行了封装，用组件的模式调用，方便使用，便于了解。
还是间接上代码比拟好，具体操作如下所示：
一、map组件的实现
1、homeMap.js文件

const app = getApp()Component({  properties: {    position: {      type: Array,      value: [],    },    markers: {      type: Array,      value: [],    },    markerList: {      type: Array,      value: []    },    getCurrentElement: {      type: Function,      value: function () { }    }  },  data: {    position: [],    markerList: {},    markers: []  },  ready: function () {    const mapContext = wx.createMapContext('map')    const {      position,      markers,      markerList    } = this.properties;    this.setData({      position,      markers,      markerList,    });    mapContext.moveToLocation({      longitude: 114.54286,      latitude: 22.05956,      complete(e) {        console.log('moveToLocation', e)      }    })  },  methods: {    markertap({      markerId    }) {      let {        markerList      } = this.properties;      markerList && markerList.map((item, idx) => {        if (item.id === markerId) {          item.num = markerList.length;          this.triggerEvent('onMarker', item) //通过triggerEvent将参数传给父组件        }      })    }  },})

 
2、homeMap.json文件

`{  "component": true}`

 
3、homeMap.wxml文件

`<map id="map"longitude="{{position[0]}}"latitude="{{position[1]}}"scale="14"controls="{{controls}}"bindcontroltap="controltap"markers="{{markers}}"markerList="{{markerList}}"enable-zoom="true"bindmarkertap="markertap"polyline="{{polyline}}"scale="11"style="width: 100%; height: 100%;" ></map>`

 
4、homeMap.wxss文件
该文件不做操作
 
二、调用map组件的实现
在须要应用地图的中央，调用map组件，具体操作步骤如下所示：
1、home.js文件
` Page({

  data: {    markerPorts: [], // 定位点    position: [], // 地图中心点地位    parkMark: {}  },  onReady: function () {  //网络申请，这里能够疏忽    let url = 'ec/me/pag-space/list'    const params = {      pageNum: 1,    }    homeParkList(url, params).then(({      code,      data,      msg    }) => {      if (code === "200") {        const {          records,          list        } = data        this.setData({          records: records        })        const markers = []; // 定位点汇合        const marker = {          '0': "/images/green_marker.png",          '1': "/images/red_marker.png",          '2': "/images/yellow_marker.png",          'def': "/images/yellow_marker.png"        }        // 拼装定位点汇合        list.forEach(res => {          const {            id,            latitude,            longitude,            parkingStatus,          } = res          markers.push({            id,            latitude,            longitude,            iconPath: marker[parkingStatus],            width: 30,            height: 30          })        })        wx.chooseLocation({          complete: e => {            markers.push({              id: 9999,              latitude: this.data.position[0],              longitude: this.data.position[1],              iconPath: marker['def'],              width: 30,              height: 30            })            this.setData({              position: [e.longitude, e.latitude],              markerPorts: markers,              markerList: list            })          }        })      }    })  },  getMarkerInfo(e) {    if (e.toString() === '[object Object]') {      this.setData({        parkInfo: e.detail      })    }  },})`

 
2、home.json文件
` {

  "component": true,  "usingComponents": {    "component":"../../components/Map/homeMap"  //援用map组件  }}`

 
3、home.wxml文件
` <view class="page">

    <view class='content'>      <component class="map-comp" position="{{position}}" markers="{{markerPorts}}" markerList="{{markerList}}" bind:onMarker="getMarkerInfo" bind:aaa="bb" />    </view></view>`

 
具体实现的效果图如下所示：

以上就是本章全部内容，欢送关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢送关注！