微信小程序：高德地图在小程序中的实践（含静态地图）

前言

前人栽树，后人乘凉。记录下工作的点点滴滴，让同道中人少走弯路~

来看看需求和问题：房产相关的项目，详情中需要显示房源地址，底部要有固定的菜单（不是tabbar），房源数据过多，数据超过一屏时，map组件从底部进入，会穿透固定在底部的菜单，导致页面闪烁。

开始

参考一些行业大佬的产品，发现他们使用的只是一张图片，没有使用原生的map组件去实现，我想可能也是开发中遇到了坑。。

鉴于我司全部项目数据使用的是高德地图，在小程序中为了坐标一致，也使用高德推出的 微信小程序SDK。下面介绍一下如何使用。

实践

官方链接：https://lbs.amap.com/api/wx/summary/
参照官方的教程，在获取相应的key值，并下载所需的文件到本地，在项目中使用

在页面的js中引入高德的js文件：

// 引入高德地图
var amapFile = require('../../../libs/map/amap-wx.js')

 初始化地图调用方法获取静态地图：

// 绘制静态图片 【lon:经度， lat: 纬度】
getStaticMapImg(lon, lat) {
  let that = this
  var myAmapFun = new amapFile.AMapWX({
    key: '你申请的key值'
  }) myAmapFun.getStaticmap({
    // 中心点
    location: lon + ',' + lat,
    // 缩放
    zoom: 14,
    // 图片的宽高
    size: that.data.staticImgWidth + '*' + that.data.staticImgHeight,
    // 图片的清晰度
    scale: 2,
    // 标记点
    // markers: 'large,0xFF0000,这:116.37359,39.92437',
    // markers: '-1,http://admin.broker.fangbee.cn/img/house-icon.png,0:'+lon+','+lat,
    // -1,标注图片的URL地址,0: 经度,纬度
    markers: '-1,http://xxx.yyy.zzz.cn/img/map.png,0:' + lon + ',' + lat,
    // 标签  内容，字体，粗细，字号，字体颜色，背景颜色
    // labels: '"",0,0,32,0xffffff,0x087b46:116.37359,39.92437',
    // labels: '朝阳公园,2,0,16,0xFFFFFF,0x008000:116.48482,39.94858',
    success: function(res) {
      that.setData({
        // res.url: 返回的静态图片的URL地址
        mapStaticImg: res.url
      })
    },
    fail: function(err) {
      console.log(err)
    }
  })
}

在官方的小程序示例中，是没有自定义标注图片的，但是在普通的js API中是有的，所以参照着试一试，结果就OK了，皆大欢喜~

还有一些被注释掉的，都是一些其他的标记，有兴趣可以打开看一看。

附上一张效果图（上是静态地图，下是map组件）：

总结

1. 在没有使用静态图片之前，也是用的高德地图实例化map组件。具体的实现可以参考官方的文档示例，项目中还有地图周边的应用，如果有小伙伴需要，可以留言，后期整理出来放在github上；
2. 在我还没有开始我的项目之旅时，我记得有群友在群里问过这样的实现。那时候没有接触到生成静态地图，一直误以为是map组件，现在回想起，甚是惭愧~真是抱歉；
3. 学会总结，学会分享。大家一起成长，一起进步。虽然写博客一方面是希望大家遇到类似问题时，能少走弯路，但是有些坑自己爬过才会比较深刻；

4. 嘘寒问暖 不如打笔巨款~