一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

一、使用组件

内置组件map

<map class="mapStyle"
   :latitude="latitude"
   :longitude="longitude"
   :markers="covers"
   :scale="13"
   @markertap="markertap"
></map>

在这里 latitude和longitude是初始位置，scale缩放级别，取值范围为3-20 @markertap标记点事件 markers是标记点

markers标记点参数是个Array, 一般有

id:标记点id
latitude: 纬度
longitude：经度
title：标注点名
iconPath：显示的图标
width：标注图标宽度
height：标注图标高度
label：为标记点旁边增加标签

通过接口获得数据，得到的视图如下

去这里按钮，这里使用了腾讯位置服务路线规划

二、腾讯位置服务路线规划

使用方式

在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务路线规划” 申请，审核通过后，小程序开发者可在小程序内使用该插件。

然后在项目的app.json或者uniapp的manifest.json

"mp-weixin": {
    /* 微信小程序特有相关 */
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true,
    "requiredBackgroundModes": ["audio"],
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    },
    "plugins": {
      "routePlan": {
        "version": "1.0.19",
        "provider": "wx50b5593e81dd937a"
      }
    },
    "uniStatistics": {
      "enable": true
    }
  },

然后在页面中，使用插件

handleLocation () {
      let plugin = requirePlugin('routePlan');
      const { title, latitude, longitude} = this.siteData
      let key = ''  // 使用在腾讯位置服务申请的key
      let referer = '';   // 调用插件的app的名称
      let endPoint = JSON.stringify({  // 终点
        'name': title,
        'latitude': latitude,
        'longitude': longitude
      })
      wx.navigateTo({
        url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
      })
    }

这里有几个关键点，

第一个是申请腾讯位置服务的key
第二个是点用小程序的名称
第三个是终点的位置

至于个人的位置，如果没有传初始位置，那么就默认用户的真实位置

key的申请

在这里申请个key就可以了

因为自己做了个小程序的项目，所以写下，这个地图是有变动的，大概几年以前不是这样，这个也不常用，所以就记录下，下次再写的话更方便！

原生小程序项目复盘-地图

一、使用组件

二、 腾讯位置服务路线规划

二、腾讯位置服务路线规划