微信小程序开发：腾讯地图集成详细步骤

前言

具体实现

一、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/listconst params = {pageNum: 1,}homeParkList(url, params).then(({code,data,msg}) => {if (code === "200") {const {records,list} = datathis.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,} = resmarkers.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>

最后