uniapp中使用高德地图进行位置标记

辽辽无期

于 2024-01-11 16:59:28 发布

阅读量1.3k

点赞数 7

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/yaya_xiaohui/article/details/135533589

版权

需求描述：

app端实现，多个项目位置的标记
每次查询项目后进行重新标记
每个标记点可以查看详细信息

效果图：
在这里插入图片描述

1、首先去申请高德地图key
2、创建地图容器

<view id="amap" class="amap" :pointList="pointList" :change:pointList="ModuleMap.setParkList"></view>

:change:pointList=“ModuleMap.setParkList” renjs语法

3、先了解下render.js 用法

4、数据处理代码

<script>

	export default {
   
		data() {
   
			return {
   
				searchParams: {
   
				
				},
				pointList: null,
			}
		},
		async onLoad() {
   
			
		},
		computed: {
   
		},

		mounted() {
   
			this.fetchData();
		},
		methods: {
   
			fetchData() {
   
				this.$u.get(`请求数据的url`, this.searchParams).then((res) => {
   
					let arr = []
					//数据处理
					this.pointList = arr;
					if (this.pointList.length == 0) {
   
						uni.showToast({
   
							title: '没有标注的项目',
							icon: 'none'
						});
					}
				}).catch(() => {
   

				})
			}
		},
		//标记点触发方法
		markerClick(){