在騰訊生態開發過程中，包括在微信小程序開發的時候，避免不了使用騰訊送的騰訊大禮包，從微信支付到騰訊地圖，一條龍的騰訊大禮包，不得不說鵝廠的實力是無可比擬的。
但是話又說回來了，鵝廠的官方API真是不敢恭維，尤其是微信小程序的開發文檔，如果不熟悉的話，真的是大坑不斷，連環坑不斷，無力吐槽。
本篇博文來說說微信小程序開發的時候集成實現騰訊地圖的功能，雖然微信官方API介紹了集成步驟，但是還是會給小白帶來雲裏霧裏的感覺，接下來就詳細來說說具體的集成步驟，分享出來，若有不妥之處請指正。
其實微信小程序還可以集成百度地圖的，只是這裏不再介紹其他家的地圖集成到微信小程序的步驟。本案例直接把小程序的地圖部分進行了封裝，用組件的形式調用，方便使用，便於理解。
順便貼一下騰訊位置服務的專屬鏈接：https://lbs.qq.com?lbs_invite=E4XRFLE
還是直接上代碼比較好，具體操作如下所示：
一、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>
具體實現的效果圖如下所示：
以上就是本章全部內容，歡迎關注三掌櫃的微信公衆號“iOS開發by三掌櫃”，三掌櫃的新浪微博“三掌櫃666”，歡迎關注！