微信小程序地图插件系列（一）：微信小程序使用高德地图（不定期更新）

前言

小程序默认的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中的图片路径。以便于更直观的看到效果。

---

总结

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