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

前言

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

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

开始

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

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

实践

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

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

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

 <