前言

前人栽樹，后人乘涼。記錄下工作的點點滴滴，讓同道中人少走彎路~

來看看需求和問題：房產相關的項目，詳情中需要顯示房源地址，底部要有固定的菜單（不是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 = thisvar 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組件）：

總結

在沒有使用靜態圖片之前，也是用的高德地圖實例化map組件。具體的實現可以參考官方的文檔示例，項目中還有地圖周邊的應用，如果有小伙伴需要，可以留言，后期整理出來放在github上；

在我還沒有開始我的項目之旅時，我記得有群友在群里問過這樣的實現。那時候沒有接觸到生成靜態地圖，一直誤以為是map組件，現在回想起，甚是慚愧~真是抱歉；

學會總結，學會分享。大家一起成長，一起進步。雖然寫博客一方面是希望大家遇到類似問題時，能少走彎路，但是有些坑自己爬過才會比較深刻；

噓寒問暖 不如打筆巨款~

總結

以上是生活随笔為你收集整理的微信小程序：高德地图在小程序中的实践（含静态地图）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。