小程序开发(9)-之地图组件map、导航
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、导航的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TS安装和配置
- 下一篇: JavaScript-操作DOM对象-获