小程序开发(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,
}
<map
                    latitude="{{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

#图一