前端知识笔记（十七）———地图多点标注功能

瑞崽崽崽

已于 2023-12-02 14:04:28 修改

阅读量639

点赞数 7

文章标签：前端笔记

于 2023-12-02 13:03:25 首次发布

本文链接：https://blog.csdn.net/lrx276/article/details/134750831

版权

本文介绍了如何使用JavaScript和AMapWebAPI在HTML页面中加载地图，并实现对多个地点的标注，包括地点名称、经纬度和电话号码的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用坐标以及其他软件的功能了将地图带导入，并实现地图多点标注的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>map地图绘制</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#content {
				width: 99%;
				height: 99vh;
			}
			img{
				width: 40px;
				height: 40px;
			}
			.mark{
				padding: 20px;
				color: grey;
			}
			.mark p{
				color: blue;
			}
		</style>
	</head>
	<body>

		<div id="content"></div>
		

		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "2934f3d69084c5ae500cce3e6855e62b",
			}
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript">
			
			AMapLoader.load({
				key: "74991feb2ee5e1d7e05a8cda1614652f", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			}).then((AMap) => {
				renderMap(AMap)
			}).catch((e) => {
				console.error(e); //加载错误提示
			});
			
			let data = [{
				name:"威海市",
				lat:"122.120519",
				long:"37.513315",
				tel:"11111111111"
			},{
				name:"威海北站",
				lat:"122.047161",
				long:"37.496677",
				tel:"22222222222"
			},{
				name:"邓家寨",
				lat:"122.102509",
				long:"37.447291",
				tel:"33333333333"
			},{
				name:"桃子山",
				lat:"122.080536",
				long:"37.441989",
				tel:"44444444444"
			},{
				name:"石门",
				lat:"122.104105",
				long:"37.481323",
				tel:"55555555555"
			},{
				name:"佛顶",
				lat:"122.085265",
				long:"37.483542",
				tel:"66666666666"
			},{
				name:"荷花湾",
				lat:"122.190729",
				long:"37.512619",
				tel:"77777777777"
			},{
				name:"猫头山",
				lat:"122.149186",
				long:"37.555918",
				tel:"88888888888",
			},{
				name:"日岛",
				lat:"122.206701",
				long:"37.47929",
				tel:"99999999999"
			}]

			function renderMap(AMap) {
				const map = new AMap.Map('content', {
					zoom: 12.5, //初始地图级别
					center: [data[0].lat, data[0].long], //初始地图中心点
				});

				for (let i = 0; i < data.length; i++) {
					// 以 icon URL 的形式创建一个途经点
					var viaMarker = new AMap.Marker({
						position: new AMap.LngLat(data[i].lat, data[i].long),
						// 将一张图片的地址设置为 icon
						icon: './img/地图,图钉,标记,标点.png',
						// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
						offset: new AMap.Pixel(-20, -40)
					});
					
					viaMarker.on("click",function(){
						var infoWindow = new AMap.InfoWindow({
						    // isCustom: true,  //使用自定义窗体
						    content: `
									<div class="mark">
										<h3>${data[i].name}</h3>
										<p>tel:${data[i].tel}</p>
									</div>
							`,
						    offset: new AMap.Pixel(16, -45)
						});
						infoWindow.open(map,[data[i].lat, data[i].long]);
					})
					
					
					map.add(viaMarker);
				}

				var satelliteLayer = new AMap.TileLayer.Satellite();
				map.add(satelliteLayer);
			}
		</script>
	</body>
</html>