map用起來真的一言難盡呀，按照官方文檔說是可以支持傳入一個setting，來配置所以的屬性的。。，但是我試了沒效果，經緯度更新了，調試代碼看到的wxml經緯度也變化了，但是map上的經緯度卻沒變化，后來就是按照普遍的寫法做了，一個個屬性配置，因為我們項目中用了很多map，所以定義了一個common的setting，保持所有的map都一致，如果需要特別配置，可以在導出setting的page上自定義修改對應屬性

// map setting的默認配置 const common = {latitude: null,longitude: null,scale: 9,showCompass: false,markers: [],includePoints: [],polyline: [],range: 50,mapScale: 20,enableZoom: false,enableScroll: false,enableRotate: false, } <maplatitude="{{setting.latitude}}"longitude="{{setting.longitude}}"scale="{{setting.scale}}"show-compass="{{setting.showCompass}}"markers="{{setting.markers}}"enableZoom="{{setting.enableZoom}}"enableScroll="{{setting.enableScroll}}"enableRotate="{{setting.enableRotate}}"bindtap="navigatorTo"data-map="{{true}}"></map>

這里說說自定義地圖導航的做法，自定義那當然就是樣式和功能那些都是按照需求做的了，這里主要說下遇到的問題，避免踩坑，這里呢首先有兩種做法了，一種是通過后臺接入騰訊地圖web service api提供接口，一種是前端接入騰訊地圖，鑒于第一種需要后臺還需要去調一層騰訊地圖的api，這樣影響調用接口的時間，為了更好的用戶體驗，還是前端做更好，所以采用了前端接入的方式，那么下面說下第二種的坑

?

前端接入微信小程序javascript SDK，一開始接入這個沒發現問題，后來就是發現沒有滿足需求，另外就是在搜索地點的時候，默認是搜索到最近的地點，例如我搜索云南昆明，它可能搜索到的是附近有這么幾個字眼的位置，而不是搜到云南昆明的那個位置，為了解決開發中遇到的這些問題，后來嘗試使用了騰訊地圖的web service api，也滿足了需求，返回了我們需要的pos的地址列表，打點的位置，距離，還有行駛的時間，相比于微信小程序javascript SDK，有些功能更加強大，如果需要自定義這塊的話，可以使用web service api處理，另外如果只是需要提供一個導航的功能，也可以使用小程序自身提供的路線規劃插件

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan

#圖一

?

總結

以上是生活随笔為你收集整理的小程序开发(9)-之地图组件map、导航的全部內容，希望文章能夠幫你解決所遇到的問題。

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