高德地图点击位置显示详情

最新推荐文章于 2023-09-15 17:00:14 发布

南玖i

最新推荐文章于 2023-09-15 17:00:14 发布

阅读量430

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/m0_49789433/article/details/130904325

版权

1.首先你高德已经引入一切都准备完善了

	initMap() { //地图初始化
			AMapLoader.load({
				key: "c488bd7164606c7066d0a6def81b6d71", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			}).then((AMap) => {
				this.infoWindow = new AMap.InfoWindow({
					anchor: "top-left",
					offset: new AMap.Pixel(0, -30)
				});
				AMap.plugin(['AMap.DistrictSearch'], () => { //获取地图中心点位置等信息
					new AMap.DistrictSearch({
						extensions: "all",
						subdistrict: 1,
						level: "district"
					}).search('xxxx', (status, result) => {
						let center = [result.districtList[0].center.lat, result.districtList[0]
							.center.lng
						]; 
						let bounds = result.districtList[0].boundaries;
						this.map = new AMap.Map("map", { //设置地图容器id
							zoom: 7, //初始化地图级别
							zooms: [5, 13],
							center: new AMap.LngLat(center[1], center[0]), //初始化地图中心点位置
							layers: [AMap.createDefaultLayer()]
						});
						let icon = new AMap.Icon({
							image: require('../../assets/img/icon/yudi.png'),
							size: new AMap.Size(35, 35)//icon的大小
						});

						var markerList = [];
						for (let i in this.initMapdata) {
							markerList.push(
								new AMap.Marker({
									position: new AMap.LngLat(this.initMapdata[i].jd, this.initMapdata[i].wd),
									icon: icon,
									title: '北京',
									zoom: 13,
									label: {
										content: this.initMapdata[i].name,
										offset: new AMap.Pixel(-30, 30),
									}
								})
							)

						}




						this.map.add(markerList);
						console.log(this)
						// 标记点点击事件

						for (var i = 0; i < markerList.length; i++) {
							markerList[i].orderno = '99999999999'
							// markerList[i].on('click', function (e) {
							// 	console.log(e);
							// })
							
					})
				})
			});
		},

2.data中定义 infoWindow 字段

3.在initMap 插入此代码

this.infoWindow = new AMap.InfoWindow({
					anchor: "top-left",
					offset: new AMap.Pixel(0, -30)
});

4.在你事件最后加入

插入以下代码

let content =
		'<ul style="  margin:-10px 0 5px 0; padding:0.2em 0;">'
		+ '<li  style="font-size:14px;color:#727272;">'
	+ '<span style="width:50px; display:inline-block;">第</span>'+ i + '条</li>'
	+ '<li style="line-height:26px; font-size:14px;color:#727272;margin-bottom:6px">'
	+ '<span style="width:50px; display:inline-block;">姓 名：</span>'
	+ '0000' + '</li>'
	+ '<li style="font-size:14px;color:#727272;">'
	+ '<span style="width:50px; display:inline-block;" >地 址：</span>'+ '9999' + '</li>'
	+ '</ul>'
markerList[i].content = content
								
markerList[i].on("click", this.markerClick)

5.在方法中加入一个方法

	markerClick(e) {
			// 标注的点击事件
			this.infoWindow.setContent(e.target.content);
			this.infoWindow.open(this.map, e.target.getPosition());
		},

全部代码

initMap() { //地图初始化
			AMapLoader.load({
				key: "c488bd7164606c7066d0a6def81b6d71", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			}).then((AMap) => {
				this.infoWindow = new AMap.InfoWindow({
					anchor: "top-left",
					offset: new AMap.Pixel(0, -30)
				});
				AMap.plugin(['AMap.DistrictSearch'], () => { //获取地图中心点位置等信息
					new AMap.DistrictSearch({
						extensions: "all",
						subdistrict: 1,
						level: "district"
					}).search('xxxx', (status, result) => {
						let center = [result.districtList[0].center.lat, result.districtList[0]
							.center.lng
						]; //
						let bounds = result.districtList[0].boundaries;
						this.map = new AMap.Map("map", { //设置地图容器id
							zoom: 7, //初始化地图级别
							zooms: [5, 13],
							center: new AMap.LngLat(center[1], center[0]), //初始化地图中心点位置
							layers: [AMap.createDefaultLayer()]
						});
						let icon = new AMap.Icon({
							image: require('../../assets/img/icon/yudi.png'),
							size: new AMap.Size(35, 35)//icon的大小
						});

						var markerList = [];
						for (let i in this.initMapdata) {
							markerList.push(
								new AMap.Marker({
									position: new AMap.LngLat(this.initMapdata[i].jd, this.initMapdata[i].wd),
									icon: icon,
									title: '北京',
									zoom: 13,
									label: {
										content: this.initMapdata[i].name,
										offset: new AMap.Pixel(-30, 30),
									}
								})
							)

						}




						this.map.add(markerList);
						console.log(this)
						// 标记点点击事件

						for (var i = 0; i < markerList.length; i++) {
							let content =
								'<ul style="  margin:-10px 0 5px 0; padding:0.2em 0;">'
								+ '<li  style="font-size:14px;color:#727272;">'
								+ '<span style="width:50px; display:inline-block;">第</span>'
								+ i + '条</li>'
								+ '<li style="line-height:26px; font-size:14px;color:#727272;margin-bottom:6px">'
								+ '<span style="width:50px; display:inline-block;">姓 名：</span>'
								+ '0000' + '</li>'
								+ '<li style="font-size:14px;color:#727272;">'
								+ '<span style="width:50px; display:inline-block;" >地 址：</span>'
								+ '9999' + '</li>'
								+ '</ul>'
								markerList[i].content = content
								markerList[i].on("click", this.markerClick)
						}
					})
				})
			});
		},
		markerClick(e) {
			// 标注的点击事件
			this.infoWindow.setContent(e.target.content);
			this.infoWindow.open(this.map, e.target.getPosition());
		},