地图结构练习-CSDN博客

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/137014633

本文介绍了如何在HTML页面中通过引入AMap的JS文件并设置地图、标注点和信息窗口，展示了如何在地图上添加自定义标记并实现点击事件触发信息显示。

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

第一要先打开编辑器

第二要引入其地图的js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>地图</title>
		<script src="./js/echarts.js"></script>
<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
	</body>
</html>

注意要初始化div才行

<script type="text/javascript">
		AMapLoader.load({
				key: "a85b3d76e0c261485e9267f227b33aec", // 申请好的Web端开发者 Key，调用 load 时必填  
				version: "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15  
			})
			.then((AMap) => {
				var map = new AMap.Map("container", {
					zoom: 13,
					center: [113.977192, 35.282538],
					
					resizeEnable: true
				});

				// 定义标点数组  
				var markersData = [{
						position: [113.977192, 35.282538],
						title: "新乡"
					},
					{
						position: [115.030421, 35.394548],
						title: "老家"
					},
					{
						position: [116.39, 39.9],
						title: "北京"
					}
				];

				// 创建信息窗体  
				const infoWindow = new AMap.InfoWindow({
					isCustom: true,
					content: "<div>HELLO,AMAP!</div>",
					offset: new AMap.Pixel(16, -45),
				});
				
				// 遍历数组，创建标点并添加到地图  
				markersData.forEach(function(markerData) {
					var marker = new AMap.Marker({
						position: markerData.position,
					});
					map.add(marker);

					// 绑定点击事件  
					marker.on("click", function(e) {
						infoWindow.setContent("<div>" + markerData.title +
						"hello!</div>"); // 更新信息窗体内容  
						infoWindow.open(map, e.target.getPosition());
					});
				});
			})
			.catch((e) => {
				console.error(e); // 加载错误提示  
			});
	</script>