258资源分享网

自从小程序发布以来，一直负责着公司有关小程序的开发工作，也一直很顺利，期间也完成了一个项目的上线，现在该项目要迭代第二个版本实现路线规划的功能。最开始认为应该和网页端一样呢，其实不然。网页端是引入官方提供的JS库文件，然后根据api文档提供的接口调用相关接口，路线自动会渲染在页面上，而小程序这个则需要我们自己去处理路线数据，组装成小程序能识别的数据结构。下面将本人实现过程中的总结汇报给大家，希望对大家有帮助。 一、场景描述

这是一个连锁加盟的企业，数据库里储存了各经销商的位置，要求系统具备可以让用户点击位置规划出从用户所在位置到该经销商的路线图。在传统web端实现起来比较轻松，我们只需要通过H5的位置接口获取用户当前位置。然后引入第三方地图组件库，调用相关api。路线自然会渲染到页面中。

<script charset="utf-8" src=http://www.yiyongtong.com/archives/"https:/map.qq.com/api/js?v=2.exp"></script> <script> var start; // 起点位置 var drivingService; // 驾车服务实例 var option = JSON.parse(sessionStorage.getItem("end")); var end = new qq.maps.LatLng(option['lat'],option['lnt']); //数据库存储的位置 function callback( res ){ start = new qq.maps.LatLng(res.coords.latitude, res.coords.longitude); var map = new qq.maps.Map(document.getElementById("container"), { center: start }); //设置获取驾车线路方案的服务 drivingService = new qq.maps.DrivingService({ map: map, //展现结果 panel: document.getElementById('infoDiv') }); search(); } //设置搜索地点信息、驾车方案等属性 function search( ) { var type = ["LEAST_TIME","LEAST_DISTANCE","AVOID_HIGHWAYS","REAL_TRAFFIC","PREDICT_TRAFFIC"]; /** * LEAST_TIME => 最少时间 * LEAST_DISTANCE => 最短距离 * AVOID_HIGHWAYS => 避开高速 * REAL_TRAFFIC => 实时路况 * PREDICT_TRAFFIC => 预测路况 */ //设置驾车方案 drivingService.setPolicy(qq.maps.DrivingPolicy[type[0]]); //设置驾车的区域范围 drivingService.setLocation("天津"); //设置回调函数 drivingService.setComplete(function(result) { if (result.type == qq.maps.ServiceResultType.MULTI_DESTINATION) { alert("起终点不唯一"); } }); //设置检索失败回调函数 drivingService.setError(function(data) { alert(data); }); //设置驾驶路线的起点和终点 drivingService.search(start, end); } window.onload=function () { if (navigator.geolocation) { //判断浏览器是否支持地理位置接口 navigator.geolocation.getCurrentPosition(callback,function () { var citylocation,map,marker = null; var init = function() { var center = new qq.maps.LatLng(39.916527,116.397128); var city = document.getElementById("city"); map = new qq.maps.Map(document.getElementById('container'),{ center: center, zoom: 13 }); //获取 城市位置信息查询 接口 citylocation = new qq.maps.CityService({ //设置地图 map : map, complete : function(results){ console.log(results.detail.latLng); var latlng = results.detail.latLng; callback({coords:{"latitude": latlng.getLat(),"longitude":latlng.getLng()}}); } }); } init(); citylocation.searchCityByIP("{$ip}"); }); } } </script>

同样的功能我们要放到小程序里实现，自然要先看看小程序是否提供了相关的接口了呢。

上图就是小程序提供的位置地图相关api。我尝试调用了openLocation接口。

var address = wx.getStorageSync('latlng');//数据库存储的位置 wx.openLocation({ latitude: address.lat, longitude: address.lng, name:"茶业精品店", address:"河北省胡家庄兴园路567号", scale: 28 })

正如上图所示出现了我想要的去这里按钮，但是在苹果手机(iphone 6 ios9.3.2)上是调不起该组件的。后面经过一番查阅在社区里面找到了答案，苹果上会默认把参数当成字符串解析，我们需要手动转成Number类型。调整后代码如下：

var address = wx.getStorageSync('latlng');//数据库存储的位置 wx.openLocation({ latitude: Number(address.lat), longitude: Number(address.lng), name:"茶业精品店", address:"河北省胡家庄兴园路567号", scale: 28 })

我们可以点击右下角调用手机自带地图或者导航软件，进行路线规划。