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

需求描述：

• 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(){
		
		}
	}
</script>

5、地图渲染代码

<script module="ModuleMap" lang="renderjs">
	const start = 'static/marker-red.png';
	import config from '@/components/amap/config.js'
	export default {
		data() {
			return {
				map: null,
				layer: null,
				markers: [],
				isExistImplement: false,
				markerId: '',
				parkList: [],
			}
		},

		watch: {
		//监听parkList数据的变化
			parkList() {
				if (this.markers && this.layer) {
					this.layer.remove(this.markers)
				}
				this.createLabelsLayer();
			}
		},
		mounted() {
			if (window.AMap) {
				this.initAmap();
			} else {
				const script = document.createElement('script');
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK + '&plugin=AMap.LabelsLayer';
				script.onload = () => {
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [118.859457, 28.970079], //todo 中心点坐标
					zoom: 10, //显示的缩放级别
					zooms: [12, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
				})
				//地图创建完成 标注点
				this.map.on("complete", () => {
					this.createLabelsLayer();
				})
			},
			createLabelsLayer() {
				if (!this.map) return;
				if (!this.layer) {
					this.layer = new AMap.LabelsLayer({
						zIndex: 1000,
						collision: false
					});
					this.map.add(this.layer);
				}
				this.removeAllOverlay();
				var markers = [];
				var icon = {
					type: 'image',
					image: start, //标记点图片，自己定义
					size: [26, 34],
					anchor: 'bottom-center',
				};
				var text = {
					// 要展示的文字内容
					content: '',
					direction: 'right',
					//todo 文字在 点标记上的偏移量
					offset: [-20, -5],
					// 文字样式
					style: {
						// 字体大小
						fontSize: 12,
						// 字体颜色
						fillColor: '#22886f',
						// 描边颜色
						strokeColor: '#fff',
						// 描边宽度
						strokeWidth: 1,
					}
				};
				this.parkList.forEach((element, index) => {
					text.content = element.projectName
					element.position = [element.longitude, element.latitude];
					var labelMarker = new AMap.LabelMarker({
						position: element.position,
						icon: icon,
						text
					});
					markers.push(labelMarker);
					labelMarker.on('click', (e) => {
						// 给marker绑定事件
						this.openInfo(element);
						this.markerId = element.roadId || element.sourceId
						// 触发父组件的方法
						this.$ownerInstance.callMethod('markerClick', this.markerId)
					});
				});
				this.markers = markers
				// 一次性将标记点添加到图层
				this.layer.add(markers);
				if (!this.isExistImplement) {
					this.isExistImplement = true; //只执行一次
					this.map.setFitView(null, false, [60, 15, 30, 15]); //自适应显示多个点标记
					let zoom = this.map.getZoom(); //获取当前地图级别
					if (zoom > 5) this.map.setZoom(5); //设置地图层级
				}
			},
			//窗体中显示的内容
			openInfo(obj) {
				let domStr = `
					<div>
					  <div style="display: flex; justify-content: space-between">
						<div>项目类别：${obj.classifyName}</div>
					  </div>
					  <div>建设性质：${obj.natureConstructName}</div>
					  <div>工程性质：${obj.natureEngineeringName}</div>
					  <div>负责人：${obj.headUserName}</div>
					  <div>总投资：${Number(obj.totalInvestment).toFixed(6)}</div>
					  <div>
						开工日期：${
						  obj.startDay == null ? "" : obj.startDay
						}
					  </div>
					  <div>
						竣工日期：${ obj.overDay == null ? "" : obj.overDay }
					  </div>
					</div>
				`;
				var infoWindow = new AMap.InfoWindow({
					zIndex: 999,
					offset: [0, -38], //偏移
					content: domStr, //使用默认信息窗体框样式，显示信息内容
				});
				infoWindow.open(this.map, obj.position);
			},
			removeAllOverlay() {
				// 清除地图上所有添加的覆盖物
				this.map.clearMap();
			},
			//接收数组参数
			setParkList(newValue, oldValue, ownerInstance, instance) {
				this.parkList = newValue;
			},

		}
	}
</script>