uniapp使用高德地图线路规划 |
您所在的位置：网站首页 › 高德地图可以绘制路线图 › uniapp使用高德地图线路规划 |
uniapp使用高德地图线路规划
|
地图终于实现了想要的功能 准备高德地图提供了线路规划的接口，但是由于uniapp使用的是小程序的SDK，有些东西就会无法使用 参考文档 补一下源代码 amap-route-planning.js //高德key const key = '高德地图key'; //引入改版的sdk const amapFile = require('./amap-uni.js'); function PlanningRoute(start, end, result, fail) { if(!check(start,end)){ fail("请输入正确的start和end") return } let that = this; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getWalkingRoute({ origin: start, destination: end, success: function(data) { console.log(data) var points = []; if (data.paths && data.paths[0] && data.paths[0].steps) { var steps = data.paths[0].steps; for (var i = 0; i points.push({ longitude: parseFloat(poLen[j].split(',')[0]), latitude: parseFloat(poLen[j].split(',')[1]) }) } } } //这个返回结果就是对应的路线坐标,其他属性页面自己配置,请参照uniapp地图组件一章节 //https://uniapp.dcloud.io/component/map result({ points: points, color: "#0898ef", width: 8 },data) }, fail: function(info) { fail(info) } }) } //标记标记点 function Makemarkers(startpoi, endpoi, success) { if(!check(startpoi,endpoi)) return let markers = []; let circle = []; //起点 let start = { iconPath: "/static/start.png", id: 0, longitude: startpoi.split(",")[0], latitude: startpoi.split(",")[1], width: 28, height: 33 } markers.push(start) //终点 let end = { iconPath: "/static/end.png", id: 1, longitude: endpoi.split(",")[0], latitude: endpoi.split(",")[1], width: 28, height: 33, callout:{ content:"开始导航", borderRadius:20, padding:5, bgColor:"#1f9ae4", color:"#fff", display:"BYCLICK", textAlign:"center" } } let endCircle = { latitude:endpoi.split(",")[1], longitude:endpoi.split(",")[0], fillColor:"#1f9ae41e", color:"#1f9ae400", strokeWidth:0, radius:50 } markers.push(end) circle.push(endCircle) //统一风格为回调方式,也可以直接返回这个markers success(markers,circle); } function check(start,end){ if(!start||!end) return false } module.exports = { line: PlanningRoute, markers: Makemarkers } 使用线路规划的地方 import Amap from '@/common/amap/amap-route-planning.js'; ··· getWay(point){ let that = this; var startPoi = that.longitude + ',' + that.latitude; var endPoi = point; //start和end的格式是 longitude, latitude Amap.line(startPoi, endPoi, function(res, data) { // 将返回的值添加到路线中 map的polyline属性值中 that.polyline.push(res); }); //添加起点和终点以及终点范围区域 Amap.markers(startPoi, endPoi, function(endRes, circleRes) { that.markers.push.apply(that.markers, endRes); that.circle.push.apply(that.circle, circleRes); }); } ··· |
SDK里面的东西都是小程序中的语法，比如wx.getLocation这样一来在uniapp中就会报错 为了解决这个问题，我把他的amap-wx.js改成了amap-uni.js 我已经放到了我的资源和百度云里,百度云提取码 mtm5【本文地址】
今日新闻 |
推荐新闻 |