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

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

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

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

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

实践
官方链接：概述-微信小程序插件 | 高德地图API
参照官方的教程，在获取相应的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组件）：

原文链接：https://blog.csdn.net/weixin_39015132/article/details/82895744