uni-app使用自带map（高德地图），实现定位，撒点，绘制路线，绘制区域

已于 2024-03-13 09:19:45 修改
阅读量1.5k 收藏 4
点赞数 2
文章标签： uni-app 前端 javascript
于 2024-03-12 15:19:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972428/article/details/136653388
版权
文章描述了如何在Vue项目中使用uni-app的内置地图组件，实现地理位置定位、标记点添加、路径线绘制以及区域的绘制功能，包括使用`uni.createMapContext`和组件交互的方法。
摘要由CSDN通过智能技术生成

本部分采用自带map组件进行。

实现效果：

<template>
	<view>
		<map id="test_map" ref="map1" style="width: 100%; height: 600px" :show-location="true"
			:longitude="map.longitude" :latitude="map.latitude" :markers="markers" :polyline="polyline"
			show-compass="true" :polygons="polygons" :controls="controls" @tap="tapMap">

		</map>
		<button @click="position(39.894589, 116.32125)">定位</button>
		<button @click="point">撒点</button>
		<button @click="line">划线</button>
		<button @click="area">绘制区域</button>
		<button @click="doDelete">清空</button>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				//绘制区域
				polygons: [],
				//区域点lsit
				option: [{
						longitude: 115.52125,
						latitude: 39.794587,
					},
					{
						longitude: 114.02125,
						latitude: 39.594581,
					},
					{
						longitude: 116.72125,
						latitude: 39.294585,
					}
				],
				mapContext: {},
				map: {
					longitude: "", //经度
					latitude: "", //纬度
				},
				//线数据
				polyline: [],
				//点数据list
				pointList: [{
						longitude: 115.52125,
						latitude: 39.794587,
					},
					{
						longitude: 114.02125,
						latitude: 39.594581,
					},
					{
						longitude: 119.72125,
						latitude: 39.294585,
					},
				],
				controls: [],
				//撒点list
				markers: [],
			};
		},
		created() {
			let _this = this;
			// if (this.getLocation != null) {
			// 	_this.map.longitude = this.getLocation.longitude;
			// 	_this.map.latitude = this.getLocation.latitude;

			// 	return;
			// }
		},
		mounted() {
			this.mapContext = uni.createMapContext("test_map", this);
		},
		methods: {
			//撒点
			point() {
				// 遍历 polyline 中的每个点，并添加到地图上
				this.pointList.forEach(point => {
					this.addPoint(point.latitude, point.longitude);
				});
			},
			//描点
			addPoint(latitude, longitude) {
				let point = {
					id: this.markers.length + 1, // 自动增加 id
					width: 40, //宽
					height: 40, //长
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/default.png", // 使用默认定位图标
					anchor: {
						x: 0.5,
						y: 1,
					},
				};
				this.markers.push(point);
			},
			//划线
			line() {
				// 更新 polyline 数组
				this.polyline = [{
					points: [{
							longitude: 116.52125,
							latitude: 39.794587,
						},
						{
							longitude: 116.02125,
							latitude: 39.594581,
						},
						{
							longitude: 116.72125,
							latitude: 39.294585,
						}
					],
					color: "#ff0f0f",
					width: 10,
					dottedLine: true,
					arrowLine: true,
					colorList: true,
				}];

			},
			//绘制区域
			area() {
				// 点线面，如果不是面就不让他生成
				if (this.option.length > 2) {
					this.polygons = [{
						strokeWidth: 1,
						strokeColor: '#67c23a',
						fillColor: '#1791fc66',
						dottedLine: false,
						arrowLine: false,
						level: "abovelabels",
						points: this.option
					}];
					this.polygons[0].points = [];
					this.polygons[0].points.push(...this.option)

				} else {
					uni.showToast({
						title: "起码选择三个点",
						duration: 2000,

						icon: 'error',
					})
				}



			},
			tapMap(e) {
				var that = this;
				var id = e.currentTarget.id;
				var maps = uni.createMapContext("test_map", this).$getAppMap();

				maps.onclick = function(point) {
					console.log(point);

					point.iconPath = "/static/default.png";
					that.markers = that.markers.concat(point);

					uni.showToast({
						title: "添加成功",
						icon: "none",
					});
				};
			},
			//定位
			position(latitude, longitude) {
				this.mapContext.moveToLocation({
					latitude: latitude,
					longitude: longitude,
					success: (res) => {
						console.log('撒点')

						this.addPoint(latitude, longitude);
					},
				});
				// ref定位
				// this.$refs.map1.moveToLocation({
				// 		latitude: 39.894589,
				// 		longitude: 116.32125,
				// 	},
				// 	function(res) {
				// 		console.log("此处无回调!!!本条信息未在控制台打印");
				// 		console.log(res);
				// 	}
				// );
			},
			doDelete() {
				//清空区域
				this.polygons = [],
					// 清空点
					this.markers = [],
					// 清空线
					this.polyline = []
			}

		},
	};
</script>
<style>

</style>

关于定位的function，我又进行了修改和优化。

		// 选择位置
			chooseLocation() {
				uni.showLoading({
					title: '获取信息中'
				});
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.setMap(res);
						uni.hideLoading(); // 获取位置信息成功后隐藏加载指示器
					},
					fail: (error) => {
						console.error('获取位置信息失败', error);
						uni.showToast({
							title: '获取位置信息失败',
							icon: 'none'
						});
						uni.hideLoading(); // 获取位置信息失败后隐藏加载指示器
					}
				});
			},
			// 设置地图
			setMap(item) {
				this.markers = [{
					latitude: item.latitude,
					longitude: item.longitude,
				}];
				this.mapContext.moveToLocation({
					latitude: item.latitude,
					longitude: item.longitude,
					success: () => {
						this.addPoint(item.latitude, item.longitude);
					},
				});
			}

完整代码如下

<template>
	<view>
		<map id="test_map" ref="map1" style="width: 100%; height: 600px" :show-location="true"
			:longitude="map.longitude" :latitude="map.latitude" :markers="markers" :polyline="polyline"
			show-compass="true" :polygons="polygons" :controls="controls" @tap="tapMap">

		</map>
		<!-- '	<button @click="position(39.894589, 116.32125)">定位</button>' -->

		<button @click="chooseLocation">定位</button>
		<button @click="point">撒点</button>
		<button @click="line">划线</button>
		<button @click="area">绘制区域</button>
		<button @click="doDelete">清空</button>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				//绘制区域
				polygons: [],
				//区域点lsit
				option: [{
						longitude: 115.52125,
						latitude: 39.794587,
					},
					{
						longitude: 114.02125,
						latitude: 39.594581,
					},
					{
						longitude: 116.72125,
						latitude: 39.294585,
					}
				],
				mapContext: {},
				map: {
					longitude: "", //经度
					latitude: "", //纬度
				},
				//线数据
				polyline: [],
				//点数据list
				pointList: [{
						longitude: 115.52125,
						latitude: 39.794587,
					},
					{
						longitude: 114.02125,
						latitude: 39.594581,
					},
					{
						longitude: 119.72125,
						latitude: 39.294585,
					},
				],
				controls: [],
				//撒点list
				markers: [],
			};
		},
		created() {
			let _this = this;
			// if (this.getLocation != null) {
			// 	_this.map.longitude = this.getLocation.longitude;
			// 	_this.map.latitude = this.getLocation.latitude;

			// 	return;
			// }
		},
		mounted() {
			this.mapContext = uni.createMapContext("test_map", this);
		},
		methods: {
			//撒点
			point() {
				// 遍历 polyline 中的每个点，并添加到地图上
				this.pointList.forEach(point => {
					this.addPoint(point.latitude, point.longitude);
				});
			},
			//描点
			addPoint(latitude, longitude) {
				let point = {
					id: this.markers.length + 1, // 自动增加 id
					width: 40, //宽
					height: 40, //长
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/default.png", // 使用默认定位图标
					anchor: {
						x: 0.5,
						y: 1,
					},
				};
				this.markers.push(point);
			},
			//划线
			line() {
				// 更新 polyline 数组
				this.polyline = [{
					points: [{
							longitude: 116.52125,
							latitude: 39.794587,
						},
						{
							longitude: 116.02125,
							latitude: 39.594581,
						},
						{
							longitude: 116.72125,
							latitude: 39.294585,
						}
					],
					color: "#ff0f0f",
					width: 10,
					dottedLine: true,
					arrowLine: true,
					colorList: true,
				}];

			},
			//绘制区域
			area() {
				// 点线面，如果不是面就不让他生成
				if (this.option.length > 2) {
					this.polygons = [{
						strokeWidth: 1,
						strokeColor: '#67c23a',
						fillColor: '#1791fc66',
						dottedLine: false,
						arrowLine: false,
						level: "abovelabels",
						points: this.option
					}];
					this.polygons[0].points = [];
					this.polygons[0].points.push(...this.option)

				} else {
					uni.showToast({
						title: "起码选择三个点",
						duration: 2000,

						icon: 'error',
					})
				}



			},
			tapMap(e) {
				var that = this;
				var id = e.currentTarget.id;
				var maps = uni.createMapContext("test_map", this).$getAppMap();

				maps.onclick = function(point) {
					console.log(point);

					point.iconPath = "/static/default.png";
					that.markers = that.markers.concat(point);

					uni.showToast({
						title: "添加成功",
						icon: "none",
					});
				};
			},
			//定位
			position(latitude, longitude) {
				this.mapContext.moveToLocation({
					latitude: latitude,
					longitude: longitude,
					success: (res) => {
						console.log('撒点')

						this.addPoint(latitude, longitude);
					},
				});
				// ref定位
				// this.$refs.map1.moveToLocation({
				// 		latitude: 39.894589,
				// 		longitude: 116.32125,
				// 	},
				// 	function(res) {
				// 		console.log("此处无回调!!!本条信息未在控制台打印");
				// 		console.log(res);
				// 	}
				// );
			},
			doDelete() {
				//清空区域
				this.polygons = [],
					// 清空点
					this.markers = [],
					// 清空线
					this.polyline = []
			},
			// 选择位置
			chooseLocation() {
				uni.showLoading({
					title: '获取信息中'
				});
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.setMap(res);
						uni.hideLoading(); // 获取位置信息成功后隐藏加载指示器
					},
					fail: (error) => {
						console.error('获取位置信息失败', error);
						uni.showToast({
							title: '获取位置信息失败',
							icon: 'none'
						});
						uni.hideLoading(); // 获取位置信息失败后隐藏加载指示器
					}
				});
			},
			// 设置地图
			setMap(item) {
				this.markers = [{
					latitude: item.latitude,
					longitude: item.longitude,
				}];
				this.mapContext.moveToLocation({
					latitude: item.latitude,
					longitude: item.longitude,
					success: () => {
						this.addPoint(item.latitude, item.longitude);
					},
				});
			}

		},
	};
</script>
<style>

</style>

 

研二前端狗
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中使用高德地图，进行marker标点，点信息展示，支持app端
liuwenjie_的博客
05-10 1万+
uniapp、uniapp使用高德地图，app开发，安卓开发使用地图、高德地图、renderJs、地图标点、地图点信息展示、数据交互
uniapp地图规划路线
cccbbbmmm的博客
12-21 1173
通过以上步骤，你可以在 Uniapp 中使用地图进行路线规划，并在地图上展示起点、终点和规划的路线。你可以根据实际需求进行样式和交互的定制。替换为实际的起点和终点经纬度。同时，你还需要准备好起点和终点的图标图片，并将其路径设置到对应的标记点对象中。在成功返回路线信息后，我们可以设置标记点和路线，然后在地图组件中使用对应的属性进行展示。该方法接收起点和终点的经纬度，并返回规划的路线信息。在上述示例中，我们创建了一个简单的地图页面，通过调用。文件，并在该文件中编写相应的代码。需要注意的是，你需要将。
uniapp运行到微信小程序，使用高德地图，并绘制线路图
子玉的博客
12-23 2716
首先，你需要在高德开放平台注册你的key，在你注册完账号后，点击控制台点击管理key选择微信小程序，名称按要求来完成后出现一条微信小程序的key，这个后续需要用到。
uniapp开发安卓app高德地图
最新发布
weixin_45580774的博客
05-24 427
优先去高德地图开发者平台去创建关联项目。打开我的应用，添加key。# 二、uniapp配置。
【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图(1)
2401_84931310的博客
05-13 1188
key: ‘XXXXXXXXXXXXXXXXXXXXXXXX’ //这里填写自己申请的key。“desc” : “为了您更好的体验，请确认获取您的位置”获取当前的地理位置、速度。//位置信息默认数据。// 腾讯地图Api。
基于UNIAPP开发地图两点直接的线路图
SMJ0809的博客
09-22 634
【代码】基于UNIAPP开发地图两点直接的线路图。
Uniapp - 地图map组件及使用
Ainke
06-30 9136
Uniapp是一个基于Vue.js开发的跨平台应用开发框架，通过一套代码，可以同时发布到多个平台，包括iOS、Android、Web等。它提供了丰富的组件库和开发工具，大大简化了移动应用开发的流程，极大地提高了开发效率。Uniapp提供了地图组件，可以方便地在应用中集成地图功能。该地图组件基于第三方地图服务商提供的API，支持常见的地图功能，如显示地图、添加标记点、添加覆盖物等。# 4.地图组件的基本用法本篇博客介绍了Uniapp地图组件的基本用法和一些高级用法。
uni-app之地图（Map）组件详细使用教程
码奴一只猿
07-03 1万+
UniApp 是一款基于 Vue.js 开发的跨平台应用框架，它提供了丰富的组件库，其中包含了地图（Map）组件。该组件允许开发者在 UniApp 应用中集成地图功能，实现地图的显示、标记、定位等功能。本教程将详细介绍 UniApp 地图（Map）组件的使用方法，并提供示例代码，以便读者能够快速上手。
uniapp map 制作一个简单的地图导航
qq_43402051的博客
04-30 7586
uniapp map 制作简单地图导航
uniapp开发的App中使用高德地图
m0_57442975的博客
09-28 1万+
map地图在不同的开发场景使用不同，这里主要是uniapp开发的Android软件中关于高德地图使用的一些项目记录。
【Uniapp】高德地图的接入、定位、自定义标点与信息窗体使用
热门推荐
Brod-Roy的博客
06-19 2万+
因为公司的业务需求，需要实现一个接入高德地图的数据大屏，并根据坐标实现地图标点渲染，自定义信息窗体，点击定位等功能。查阅高德地图官方文档时发现使用的是原生 JavaScript ，且网上 uniapp 接入使用的教程较少，我自己摸索之后解决了不少问题，欢迎大佬补充纠正。
uni-app 支持多端第三方地图定位的方法
11-30
该方法支持跳转第三方地图并定位指定坐标。 APP端跳转至百度地图（第三方软件）；若无，则跳转至高德地图（第三方软件）；若均无，则打开腾讯地图（uni自带方法：uni.openLocation） 其它端打开腾讯地图（uni自带...
uni-app腾讯地图显示定位
06-27
【uni-app腾讯地图显示定位】 在移动应用开发中，定位功能是常见的需求，尤其是在本地服务、导航或基于位置的应用中。uni-app是一个跨平台的前端框架，它允许开发者使用一套代码来实现多端运行，包括iOS、Android、...
address(uni-app经纬度定位范围内签到)
06-24
本话题将深入探讨如何在uni-app中实现基于经纬度定位的签到功能。 首先，我们要理解uni-app中的定位功能。uni-app提供了`uni.getLocation`接口，这个接口用于获取当前的地理位置、速度。开发者可以通过设置参数，...
uni-app调用Android原生可以实现通信及打开WiFi
01-13
【uni-app调用Android原生实现通信及打开WiFi】\n\nuni-app是一个跨平台的前端框架，允许开发者使用一套代码编写应用，同时在iOS、Android、H5等多个平台上运行。在uni-app中，通过调用原生插件，我们可以实现与...
uniapp开发h5项目使用baidu-map组件实现地图引入，定位渲染，弹窗功能实现，根据定位路线图的实现
m0_72929120的博客
03-20 944
【代码】uniapp开发h5项目使用baidu-map组件实现地图引入，定位渲染，弹窗功能实现，根据定位路线图的实现。
uniapp使用高德地图定位
一切都不太晚
09-22 7740
uniapp中使用高得地图，并且兼容安卓
关于uniapp 中的高德地图路线规划
weixin_47559326的博客
06-11 2406
uniapp 使用高德地图小程序API 1.需要将小程序js相关文件复制到项目中(amap-wx.js) 2. 修改amap-wx.js 文件 amap-wx.js 不适用于app开发 将文件名及内部代码修改，否则报错！！！ 3.相关页面引入和创建地图 引入部分 import amapFile from '../../utils/amap-uni.js' html部分 <map v-if="isShow" style="width: 100vw;height: 1000rpx;z-index:
uni-app使用高德地图
09-20
使用uni-app集成高德地图的步骤如下： 1. 阅读高德地图官方文档，了解相关API的使用方法和参数。 2. 在uni-app项目中安装高德地图插件，可以通过npm或者uni-app插件市场进行安装。 3. 在App.vue文件中导入高德地图插件，并配置相应的插件参数，例如高德地图的key等。 4. 在需要使用地图的页面中，使用<template>标签添加地图组件，并设置相应的属性和事件。 5. 在页面的<scirpt>标签中，引入高德地图插件，并使用相关API进行地图的渲染、标点和定位等操作。 6. 在需要打开第三方地图应用的功能中，使用uni-app提供的方法进行跳转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值