#私藏项目实操分享#微信小程序开发（集成腾讯地图的步骤）

须知少年凌云志，曾许人间第一流。这篇文章主要讲述#私藏项目实操分享#微信小程序开发：集成腾讯地图的步骤相关的知识，希望能为你提供帮助。
前言

在微信小程序开发的时候，会避免不了的使用腾讯送的大礼包，从微信支付到腾讯地图，一条龙的服务，不得不说鹅厂的实力，但是话又说回来了，鹅厂的官方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”，欢迎关注！