uniapp地图导航

153 阅读2分钟

如果你想在你的uvue应用中实现高德地图的路径规划功能,你可能会遇到一些问题。一种常见的做法是使用rendererjs,百度地图js或高德地图js自带的drivingRouteApi进行路径规划,但这样有几个缺点:

  • 性能不好,因为rendererjs和原生不断进行数据交互会有卡顿
  • 路径搜索的交互需要自己实现,比如输入起点和终点,显示搜索结果,选择最优路线等
  • 路径规划的结果可能不准确,因为drivingRouteApi只能返回最多三条路线,而且可能受到实时路况的影响

有没有更好的方法呢?答案是有的。你可以使用uvue的map组件,结合高德地图路径规划API,来实现高效、准确、美观的路径规划功能。具体步骤如下:

  • 在uvue中引入map组件,并设置好地图的中心点和缩放级别
  • 在map组件中添加一个input组件,用于输入起点和终点
  • 在input组件中添加一个button组件,用于触发路径规划的请求
  • 在button组件中添加一个click事件,用于调用高德地图路径规划API,并传入起点和终点的经纬度
  • 在回调函数中,获取路径规划的结果,并解析出每条路线的坐标数组
  • 在map组件中添加一个polylines组件,并把坐标数组传入其中,用于绘制路径
  • 在polylines组件中设置好线条的颜色、宽度、样式等属性
  • 在map组件中添加一个markers组件,并把起点和终点的坐标传入其中,用于显示标记
  • 在markers组件中设置好标记的图标、大小、偏移等属性

这样,你就可以在uvue中实现高德地图的路径规划功能了。你可以根据自己的需求,调整地图和路径的显示效果,以及添加更多的交互功能。希望这篇博客对你有所帮助。