微信小程序----map路线规划

最新推荐文章于 2024-04-13 16:58:17 发布

liNewman

最新推荐文章于 2024-04-13 16:58:17 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/liNewman/article/details/86576772

版权

微信小程序----map路线规划

声明

bug：页面脚的步行、骑行、驾车区域在真机测试是会出现不显示问题？
造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！
解决办法：将该文本视图采用cover-view，放在map中。
感谢：感谢Lrj_estranged指出问题！

效果图

进入页面直接定位到当前位置，输入目的地！

进入定位选择目的地

返回首页查看路线规划—选择驾车、步行、骑行

查看路线规划选择驾车、步行、骑行

原理

采用微信小程序的map组件；
采用高德地图的微信小程序SDK获取规划路线的坐标点。

WXML

<view class="tui-map">
  <map id="map" longitude="{
     {currentLo}}" latitude="{
     {currentLa}}" scale="{
     {scale}}" markers="{
     {markers}}" polyline="{
     {polyline}}"  include-points="{
     {includePoints}}" show-location style="width: 100%; height: 100%;">
    <cover-view class="tui-search-bottom {
     {show ? '' : 'tui-hide'}}">
	  <cover-view class="page-group">
	    <co