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

前言

在腾讯生态开发过程中，包括在微信小程序开发的时候，避免不了使用腾讯送的腾讯大礼包，从微信支付到腾讯地图，一条龙的腾讯大礼包，不得不说鹅厂的实力是无可比拟的。但是话又说回来了，鹅厂的官方 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>

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

最后

通过上面关于在微信小程序开发中，腾讯地图集成步骤的分享，是不是觉得很简单？如果觉得简单，那说明这篇文章就有价值，因为在微信小程序开发的时候关于地图的使用也是非常场景的业务需求，尤其是还有地图经纬度定位相关的业务需求，都是非常常见且重要的业务场景，掌握这个知识点，可以解决关于地图相关的需求，尤其是刚接触微信小程序不久的开发者来说尤为重要，值得收藏。