前端小白解决疑难杂症之旅(一)

最新推荐文章于 2022-09-26 15:07:05 发布

panyiyao

最新推荐文章于 2022-09-26 15:07:05 发布

阅读量455

点赞数 1

文章标签： hive html5 html

本文链接：https://blog.csdn.net/panyiyao/article/details/104863113

版权

本文记录了一位前端新手使用高德地图API实现地图导航和路线规划的过程。通过在网页中引用高德地图并申请API key，实现了显示当前位置及步行路线的功能。在获取起点和终点信息后，调用search方法进行路线规划。若出现OVER_DIRECTION_RANGE错误，表示起点与终点距离超出范围。

摘要由CSDN通过智能技术生成

这次需要实现地图导航以及路线规划

最终效果

demo使用了高德地图以及mui

想使用高德地图的api需要先去官网申请一个key，

然后再在页面上引用

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.Walking,AMap.Transfer,AMap.Autocomplete"></script>

var map = new AMap.Map("container", {
				resizeEnable: true,
				center: [116.397428, 39.90923], //地图中心点

			});
			var start;
			var end;

			AMap.plugin('AMap.Geolocation', function() {
				var geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：5s
					buttonPosition: 'RB', //定位按钮的停靠位置
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 2