tourism/uni_applet/pageA/food/detailMap.vue

<template>
	<view>
		<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="dataObj.latitude"
			:longitude="dataObj.longitude" :markers="marker" :scale="scale" :polyline="polyline" @callouttap='toDL(dataObj)'>
			<cover-view slot="callout">
				<block v-for="(item,index) in marker" :key="index">
					<cover-view class="customCallout" :marker-id="item.id">
						<cover-view class="content row1" style="margin-top: 0;">
							{{dataObj.shopNames}}
						</cover-view>
						<cover-view class="content row2">
							距离{{(info.distance/1000).toFixed(1)}}公里
						</cover-view>
						<cover-view class="content row3">
							驾车约{{(info.duration/60).toFixed(0)}}分钟
						</cover-view>
						<cover-view class="dh" >
							导航
						</cover-view>
					</cover-view>
				</block>
			</cover-view>

			<!-- <view class="to-here">
				<image src="../../static/image/to.png" mode="widthFix" style="width: 36rpx;">
				</image>
			</view> -->
		</map>
	</view>
</template>

<script>
	var that;
	var GDMapWX = require('@/js_sdk/js-amap/amap-wx.130.js');
	import {
		authorizedLocation
	} from '@/util/util.js'
	export default {
		data() {
			return {
				polyline: [],
				dataObj: {},
				latitude: '', //纬度
				longitude: '', //经度
				marker: [],
				scale: 14, //缩放级别
				info: {},
			};
		},
		onLoad(options) {
			that = this
			this.isdingwei()
			this.dataObj = JSON.parse(options.val)
			console.log(this.dataObj)

		},
		methods: {
			getInfo(_origin, _destination) {
				return new Promise((resolve, reject) => {
					var amapPluginInstance = new GDMapWX.AMapWX({
						key: '6bafe91754a563ff2b7c02542c1ef4e8'
					});
					amapPluginInstance.getDrivingRoute({
						origin: _origin,
						destination: _destination,
						success: function(res) {
							console.log(res)
							resolve(res)
							// let _content =  that.dataObj.shopNames+'\n'+"距离约"+1+'公里'+'\n'+'驾车约'+4+"分钟"
							// console.log(_content)
							// that.marker[0].callout = { //气泡窗口
							// 	content: that.dataObj.shopNames+'\n'+"距离约"+1+'公里'+'\n'+'驾车约'+4+"分钟", //文本
							// 	// color: '#ffffff',
							// 	fontSize: 14,
							// 	borderRadius: 15,
							// 	padding: '10',
							// 	bgColor: '#fff',
							// 	display: 'ALWAYS', //常显
							// }

							//成功回调
						},
						fail: function(info) {
							//失败回调
							console.log(info)
						}
					})
				})
			},
			toDL(val) {
				console.log(val)
				let _latitude = val.location.split(",")[0]
				let _longitude = val.location.split(",")[1]
				uni.openLocation({
					latitude: Number(_latitude),
					longitude: Number(_longitude),
					success: function() {
						console.log('success');
					},
					fail(fail) {
						console.log(fail)
					},
				});
			},
			isdingwei() {
				authorizedLocation().then(async res => {
					let _obj = {}
					if (res == '取消授权') {
						
					} else {
						_obj = {
							latitude: res.latitude,
							longitude: res.longitude
						}
					}
					this.longitude = _obj.longitude
					this.latitude = _obj.latitude
					let _origin = this.longitude + ',' + this.latitude
					let _destination = this.dataObj.location.split(",")[1] + "," + this.dataObj.location.split(
						",")[0]
					let _info = await this.getInfo(_origin, _destination)
					this.info = _info.paths[0]
					this.marker[0] = {
						id: Number(this.dataObj.id),
						iconPath: '/static/image/food/location.png', //显示的图标
						latitude: Number(this.dataObj.latitude),
						longitude: Number(this.dataObj.longitude),
						width: 20,
						height: 20,

						customCallout: {
							// content: that.dataObj.shopNames + '\n' + "距离约" + 1 + '公里' + '\n' + '驾车约' + 4 +
							// 	"分钟", //文本
							// // color: '#ffffff',
							// fontSize: 14,
							// borderRadius: 15,
							// padding: '10',
							// bgColor: '#fff',
							display: 'ALWAYS', //常显
						}
					}
					let _polylineList = []
					for (let i = 0; i < this.info.steps.length; i++) {
						let _polyline = this.info.steps[i].polyline.split(";")
						for (let j = 0; j < _polyline.length; j++) {
							let _obj = {
								latitude: _polyline[j].split(",")[1],
								longitude: _polyline[j].split(",")[0]
							}
							_polylineList.push(_obj)
						}

					}
					this.polyline = [{
						points: _polylineList,
						color: "#31c27c",
						width: 5,
						arrowLine: true,
						// borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
					}]
					this.$forceUpdate()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.customCallout {
		width: 400rpx;
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.content {
			margin-top: 10rpx;
		}

		.row1 {
			font-weight: 700;
			font-size: 32rpx;
		}

		.row2,
		.row3 {
			font-size: 24rpx;
		}

		.dh {
			font-size: 24rpx;
			background: #eaad1a;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			color: #fff;
			z-index: 9999;
		}
	}
</style>