我的项目是uniapp项目，在自定义的html引入会报错，个人感觉可能是加载顺序的问题，最后修改成import maps from '._高德步行路线规划h5 api调用">
devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp H5端使用高德地图完成路线规划_高德步行路线规划h5 api调用

作者：羊村懒王 | 2024-02-18 23:58:42

赞

踩

高德步行路线规划h5 api调用

本项目是H5端，APP端地图的使用方法请参考我的另一篇博客uniapp，map地图组件打包原生APP

首先到高德地图API，申请web端key

在这里插入图片描述

参考高德H5端教程开始写代码高德地图JS API

1、准备工作，会提示你先引入下边这块代码

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

  • 1

我的项目是uniapp项目，在自定义的html引入会报错，个人感觉可能是加载顺序的问题，最后修改成

import maps from '../../static/maps.js' 

  • 1

关于maps.js文件是怎么来的，第一步准备工作的src链接，直接打开，将这个js文件保存到本地maps.js并引用就可以。

2、定义dom

<view id="container"></view>

  • 1

3、为地图容器指定宽高

#container {
	width: 750rpx;
	height: 750rpx;
}

  • 1
  • 2
  • 3
  • 4

4、初始化地图控件，需要放在this.$nextTick函数内，否则会报错(之前是按照官方的写法window.onLoad，测试也可以，过了段时间不行了，不知道什么原因)

this.$nextTick(() => {
	let _this = this;
	_this.map = new AMap.Map('container', {
		zoom: 15, //缩放级别
		resizeEnable: true, //自动定位
	});
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

初始化完成如下图
在这里插入图片描述

uniapp data中的变量，下边的操作会向变量中赋值

data() {
	return {
		map: null,
		address0: {}, //起点信息
		address1: {}, //终点信息
		star: [], //起点
		end: [], //终点
		markers: [], //点标记
		routes: {}, //路线距离时间信息记录
	}
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

5、地图已经调出来了，现在应该获取定位，并在在地图上定位标记点

AMap.plugin('AMap.Geolocation', function() {
	uni.showLoading({
		title: '系统正在定位'
	});
	var geolocation = new AMap.Geolocation({
		enableHighAccuracy: true, //是否使用高精度定位，默认:true
		timeout: 10000, //超过10秒后停止定位，默认：5s
		buttonPosition: 'RB', //定位按钮的停靠位置
		buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
		zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
	
	});
	_this.map.addControl(geolocation);
	geolocation.getCurrentPosition(function(status, result) {
		if (status == 'complete') {
			//这个地方的result，可能会出现报错：获得地理定位时间。得到ipLocation成功。获取地址失败，请检查您的密钥或网络。
			//可能是密匙申请错了，重新申请密匙，生成maps.js文件。
			console.log(result)
			uni.hideLoading();
			uni.showToast({
				title: '定位成功',
			});
			let res = {
				name: result.formattedAddress,
				latitude: result.position.lat,
				longitude: result.position.lng,
			}
			
			let marker0 = new AMap.Marker({
				map: _this.map,
				position: [res.longitude, res.latitude], //位置
				icon: '/static/star.png', // 添加 Icon 图标 URL
				offset: new AMap.Pixel(-15, -42),//偏移量
			});
			_this.markers[0] = marker0; //添加 起点 标记
	
			_this.address0 = res; //起点数据
			_this.star = [res.longitude, res.latitude]; //起点经纬度
	
		} else {
			uni.hideLoading();
			uni.showToast({
				title: '定位失败，请手动选择出发地',
			});
			console.log(result)
		}
	});
});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

如下图，定位标记，和数据都已获取到
在这里插入图片描述
6、下面是选择出发地和目的地事件，使用uni.chooseLocation()打开地图选择完成，

<view class="item" @click="chooseAddress(1)">
	<text class="title">请选择出发地</text>
</view>
<view class="item">
	<text class="color">{{address0.name}}</text>
</view>
<view class="item" @click="chooseAddress(2)">
	<text class="title">请选择目的地</text>
</view>
<view class="item">
	<text class="color">{{address1.name}}</text>
</view>
<view class="item">
	<text class="color" v-if="routes.distance">{{routes.distance/1000}}千米，</text>
	<text class="color" v-if="routes.policy == '速度最快'">出行模式：驾车，</text>
	<text class="color" v-if="routes.time">大约需要{{routes.time/60}}分钟。</text>
</view>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
chooseAddress(type) {
	uni.chooseLocation({
		success: res => {
			if (type == 1) {
				this.markers[0].setMap(null); //删除 起点 标记
				let marker0 = new AMap.Marker({
					map: this.map,
					position: [res.longitude, res.latitude], //位置
					icon: '/static/star.png', // 添加 Icon 图标 URL
					offset: new AMap.Pixel(-15, -42),//偏移量
				});
				this.markers[0] = marker0; //覆盖 起点 标记

				this.star = [res.longitude, res.latitude]; //起点经纬度
				this.address0 = res;//起点数据
				if (this.markers.length == 2) {
					this.map.clearMap();//先清除地图覆盖物
					this.add_Driving();//在重新规划路线
				} else {
					this.map.setFitView(); //自动缩放地图
				}
			} else {
				let marker1 = new AMap.Marker({
					map: this.map,
					position: [res.longitude, res.latitude], //位置
					icon: '/static/end.png', // 添加 Icon 图标 URL
					offset: new AMap.Pixel(-15, -42),//偏移量
				});
				this.address1 = res;//终点数据
				this.end = [res.longitude, res.latitude]; //终点经纬度
				this.map.clearMap();//先清除地图覆盖物
				this.markers[1] = marker1; //添加 终点 标记
				this.add_Driving();//规划路线
			}
		}
	});
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

7、地址选择完毕后规划路线

add_Driving() {
	let _this = this;
	this.map.plugin('AMap.Driving', () => {
		var driving = new AMap.Driving({
			// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
			map: this.map,
			policy: AMap.DrivingPolicy.LEAST_TIME
		})
		driving.search(this.star, this.end, function(status, result) {
			console.log(result)
			_this.routes = result.routes[0]
			_this.markers[0].setMap(null);
			_this.markers[1].setMap(null);
		})
	})
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

完成后的效果图如下
在这里插入图片描述

附上项目完整代码，注意你的key （web端 js API）
这里你只需要把你的maps.js放在static目录，
star.png，end.png 起点终点图标放在static目录，
完成后可以直接使用本代码，

<template>
	<view class="login">
		<view id="container"></view>
		
		<view class="item" @click="chooseAddress(1)">
			<text class="title">请选择出发地</text>
		</view>
		<view class="item">
			<text class="color">{{address0.name}}</text>
		</view>
		<view class="item" @click="chooseAddress(2)">
			<text class="title">请选择目的地</text>
		</view>
		<view class="item">
			<text class="color">{{address1.name}}</text>
		</view>
		<view class="item">
			<text class="color" v-if="routes.distance">{{routes.distance/1000}}千米，</text>
			<text class="color" v-if="routes.policy == '速度最快'">出行模式：驾车，</text>
			<text class="color" v-if="routes.time">大约需要{{routes.time/60}}分钟。</text>
		</view>
	</view>
</template>
<script>
	import maps from '../../static/maps.js'
	export default {
		data() {
			return {
				map: null,
				address0: {}, //起点信息
				address1: {}, //终点信息
				star: [], //起点经纬度
				end: [], //终点经纬度
				markers: [], //点标记
				routes: {}, //路线距离时间信息记录
			}
		},

		onLoad() {
			this.$nextTick(() => {
				let _this = this;
				_this.map = new AMap.Map('container', {
					zoom: 15, //缩放级别
					resizeEnable: true, //自动定位
				});

				AMap.plugin('AMap.Geolocation', function() {
					uni.showLoading({
						title: '系统正在定位'
					});
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：5s
						buttonPosition: 'RB', //定位按钮的停靠位置
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

					});
					_this.map.addControl(geolocation);
					geolocation.getCurrentPosition(function(status, result) {
						if (status == 'complete') {
							//这个地方的result，可能会出现报错：获得地理定位时间。得到ipLocation成功。获取地址失败，请检查您的密钥或网络。
							//可能是密匙申请错了，重新申请密匙，生成maps.js文件。
							console.log(result)
							uni.hideLoading();
							uni.showToast({
								title: '定位成功',
							});
							let res = {
								name: result.formattedAddress,
								latitude: result.position.lat,
								longitude: result.position.lng,
							}
							let marker0 = new AMap.Marker({
								map: _this.map,
								position: [res.longitude, res.latitude], //位置
								icon: '/static/star.png', // 添加 Icon 图标 URL
								offset: new AMap.Pixel(-15, -42),//偏移量
							});
							_this.markers[0] = marker0; //添加 起点 标记

							_this.address0 = res; //起点数据
							_this.star = [res.longitude, res.latitude]; //起点经纬度

						} else {
							uni.hideLoading();
							uni.showToast({
								title: '定位失败，请手动选择出发地',
							});
							console.log(result)
						}
					});
				});
			}
		},
		methods: {
			//选择地址
			chooseAddress(type) {
				uni.chooseLocation({
					success: res => {
						if (type == 1) {
							this.markers[0].setMap(null); //删除 起点 标记
							let marker0 = new AMap.Marker({
								map: this.map,
								position: [res.longitude, res.latitude], //位置
								icon: '/static/star.png', // 添加 Icon 图标 URL
								offset: new AMap.Pixel(-15, -42),//偏移量
							});
							this.markers[0] = marker0; //覆盖 起点 标记

							this.star = [res.longitude, res.latitude]; //起点经纬度
							this.address0 = res;//起点数据
							if (this.markers.length == 2) {
								this.map.clearMap();//先清除地图覆盖物
								this.add_Driving();//重新规划路线
							} else {
								this.map.setFitView(); //自动缩放地图
							}
						} else {
							let marker1 = new AMap.Marker({
								map: this.map,
								position: [res.longitude, res.latitude], //位置
								icon: '/static/end.png', // 添加 Icon 图标 URL
								offset: new AMap.Pixel(-15, -42),//偏移量
							});
							this.address1 = res;//终点数据
							this.end = [res.longitude, res.latitude]; //终点经纬度
							this.map.clearMap();//先清除地图覆盖物
							this.markers[1] = marker1; //添加 终点 标记
							this.add_Driving();//规划路线
						}
					}
				});
			},
			//规划路线
			add_Driving() {
				let _this = this;
				this.map.plugin('AMap.Driving', () => {
					var driving = new AMap.Driving({
						// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
						map: this.map,
						policy: AMap.DrivingPolicy.LEAST_TIME
					})
					driving.search(this.star, this.end, function(status, result) {
						console.log(result)
						_this.routes = result.routes[0]
						_this.markers[0].setMap(null);
						_this.markers[1].setMap(null);
					})
				})
			},
		},
	}
</script>
<style>
	#container {
		width: 750rpx;
		height: 750rpx;
	}
	.item {
		font-size: 28rpx;
		padding: 20rpx;
		height: 50rpx;
	}
	.title {
		margin-right: 40rpx;
	}
	.color {
		color: red;
	}
</style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172

11.16代码更新：

1、地图不加载问题：
之前测试的时候代码写在window.onLoad = () => 是可以的，现在不知道怎么回事不执行了， 
解决方法：换成this.$nextTick(()=> 之后就可以了。
2、使用geolocation.getCurrentPosition方法获取定位可能出现报错：获得地理定位时间。得到ipLocation成功。获取地址失败，请检查您的密钥或网络。
解决方法：重新申请web端 JS KEY，重新生成maps.js文件。
3路线规划，重新选择终点上次的路线不能清除
解决方法：this.map.clearMap();//先清除地图覆盖物，在使用this.add_Driving();//规划路线，全局搜索this.map.clearMap()，这个方法是我新加的，测试后可以正常规划路线了。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/111396
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号