uniapp---app端，使用高德地图绘制轨迹

最新推荐文章于 2024-07-28 10:12:06 发布

A妹～

最新推荐文章于 2024-07-28 10:12:06 发布

阅读量8.3k

点赞数 5

文章标签： uni-app map app

本文链接：https://blog.csdn.net/biubiubiutong/article/details/116546191

版权

该博客介绍了如何在uni-app的APP端利用web-view和高德地图API来绘制驾车轨迹，因为uni-app自带的地图组件兼容性不佳，作者选择了通过web-view实现路径规划。示例仅包含驾车路径规划，使用renderjs模板并用:prop和:change:prop传递及监听数据变化，强调在uni-app中需使用webKey作为关键参数。

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

uniapp>>>>app端，使用高德地图绘制轨迹，实现驾车路径的规划

uniapp自身提供地图组件，但由于兼容性比较差，很多功能无法基于uni提供的api实现自己的需求点，所以这里我们借助web-view的方式去实现路线的规划，以及高德地图的方法调用，

这里的例子只实现了驾车路径的规划

由于本次用的是renderjs这个插入模版，所以要用两个script块，并且用:prop用于传递数据参数，:change:prop用于监听数据变化

<template>
	<view class="amap-container">
		<view id="amap" class="amap" :prop="option" :change:prop="amap.updateEcharts"></view>
		<view class="" id="panel"></view>
	</view>
</template>

在这块script中，可以做正常的逻辑操作，页面间参数接收，数据的赋值等等......就一切正常写就好

<script>
export default {
	data() {
		return {
			option: []
		};
	},
	onLoad(params) {
		this.option = JSON.parse(params.data);
	},
	methods: {}
};
</script>