前言

小程序默认的map组件地图是腾讯地图，但是我们常常会遇到一些需求，让用户选择使用自己喜欢的地图，对于这些功能也是我们前端开发工程师的必要技能。

地址链接
1、高德地图，小程序sdk文档地址
2、高德地图，小程序sdk下载地址

微信小程序地图插件系列其他文章
微信小程序地图插件系列（二）：微信小程序使用百度地图

提示：以下是本篇文章正文内容，下面案例可供参考

效果展示

一、准备阶段

• 1、在高德开放平台注册成为开发者
• 2、申请开发者密钥（key）。
• 3、下载并解压高德地图微信小程序SDK

二、快速上手

• 1、创建一个小程序
• 2、创建一个map文件夹，并创建page页面
• 3、打开map.js文件，用下面的代码完全替换原代码。（注意：js文件中要使用自己的高德key）

// miniprogram/pages/gao_de/gao_de.js
var amapFile = require('../../libs/amap-wx.js');//如：..­/..­/libs/amap-wx.js
Page({
   

  /** * 页面的初始数据 */
  data: {
   
    markers: [{
   
      iconPath: "../../img/mapicon_navi_s.png",
      id: 0,
      latitude: 39.989643,
      longitude: 116.481028,
      width: 23,
      height: 33
    },{
   
      iconPath: "../../img/mapicon_navi_e.png",
      id: 0,
      latitude: 39.90816,
      longitude: 116.434446,
      width: 24,
      height: 34
    }],
    distance: '',
    cost: '',
    polyline: []
  },

  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) {
   
    var that = this;
    var myAmapFun = new amapFile.AMapWX({
   key:'你的高德key'});
    myAmapFun.getPoiAround({
   
      success: function(data){
   
        console.log(data)
        //成功回调
      },
      fail: function(info){
   
        //失败回调
        console.log(info)
      }
    })
    //获取自己所在地址的定位
    myAmapFun.getRegeo({
   
      success: function(data){
   
        //成功回调
        console.log('---------')

        console.log(data)
      },
      fail: function(info){
   
        //失败回调
        console.log(info)
      }
    })

    //获取定位地点天气内容
    myAmapFun.getWeather({
   
      success: function(data){
   
        console.log(data,'123')
        //成功回调
      },
      fail: function(info){
   
        //失败回调
        console.log(info)
      }
    })

    //路线
    myAmapFun.getDrivingRoute({
   
      origin: '116.481028,39.989643',
      destination: '116.434446,39.90816',
      success: function(data){
   
        var points = [];
        if(data.paths && data.paths[0] && data.paths[0].steps){
   
          var steps = data.paths[0].steps;
          for(var i = 0; i < steps.length; i++){
   
            var poLen = steps[i].polyline.split(';');
            for(var j = 0;j < poLen.length; j++){
   
              points.push({
   
                longitude: parseFloat(poLen[j].split(',')[0]),
                latitude: parseFloat(poLen[j].split(',')[1])
              })
            } 
          }
        }
        that.setData({
   
          polyline: [{
   
            points: points,
            color: "#0091ff",
            width: 6
          }]
        });
        if(data.paths[0] && data.paths[0].distance){
   
          that.setData({
   
            distance: data.paths[0].distance + '米'
          });
        }
        if(data.taxi_cost){
   
          that.setData({
   
            cost: '打车约' + parseInt(data.taxi_cost) + '元'
          });
        }
          
      },
      fail: function(info){
   

      }
    })

  },
  goDetail: function(){
   
    wx.navigateTo({
   
      url: '../navigation_car_detail/navigation'
    })
  },
  goToCar: function (e) {
   
    wx.redirectTo({
   
      url: '../navigation_car/navigation'
    })
  },
  goToBus: function (e) {
   
    wx.redirectTo({
   
      url: '../navigation_bus/navigation'
    })
  },
  goToRide: function (e) {
   
    wx.redirectTo({
   
      url: '../navigation_ride/navigation'
    })
  },
  goToWalk: function (e) {
   
    wx.redirectTo({
   
      url: '../navigation_walk/navigation'
    })
  },

})

• 4、打开pages/map/map.wxml文件，用下面代码完全替换

<view class="flex-style">
  <view class="flex-item active" bindtouchstart="goToCar">驾车</view>
  <view class="flex-item" bindtouchstart="goToWalk">步行</view>
  <view class="flex-item" bindtouchstart="goToBus">公交</view>
  <view class="flex-item" bindtouchstart="goToRide">骑行</view>
</view>
<view class="map_box">
  <map id="navi_map" longitude="116.451028" latitude="39.949643" scale="12" markers="{
    {markers}}" polyline="{
    {polyline}}"></map>
</view>

<view class="text_box">
  <view class="text">{
  {distance}}</view>
  <view class="text">{
  {cost}}</view>
  <view class="detail_button" bindtouchstart="goDetail">详情</view>
</view>

• 5、拷贝样式代码到 pages/index/index.wxss文件

.flex-style{
   
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.flex-item{
   
  height: 35px; 
  line-height: 35px;
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1
}
.flex-item.active{
   
  color:#0091ff;
}
.map_box{
   
  position:absolute;
  top: 35px;
  bottom: 90px;
  left: 0px;
  right: 0px;
}
#navi_map{
   
  width: 100%;
  height: 100%;
}
.text_box{
   
  position:absolute;
  height: 90px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.text_box .text{
   
  margin: 15px;
}
.detail_button{
   
  position:absolute;
  bottom: 30px;
  right: 10px;
  padding: 3px 5px;
  color: #fff;
  background: #0091ff;
  width:50px;
  text-align:center;
  border-radius:5px;
}

• 6、点击保存，他会出现下属提示

getLocation需要在app.json中声明permission

• 7、找到app.json文件，在配置上添加如下代码即可。

 "permission": {
   
    "scope.userLocation":{
   
      "desc": 
    }
  },

这里请大家对应替换自己pages/map/map.js中的图片路径。以便于更直观的看到效果。

总结

就先入个门。想继续和我完成后续学习的同志们，请关注我。以便于我更新后能通知到您！！！