百度/高德地图多点标注，多个信息窗口

Fish北冥

已于 2024-06-17 15:33:46 修改

阅读量903

点赞数 19

分类专栏： jQuery HTML JS 文章标签：百度前端

于 2024-06-17 15:26:41 首次发布

本文链接：https://blog.csdn.net/qq_42400124/article/details/139744717

版权

JS 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

jQuery

13 篇文章 2 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

效果：

1.百度地图

百度地图多点标注，多个信息窗口

2.高德地图

高德地图多点标注，多个信息窗口

说明：前面用的百度，后面英文站没找到百度的英文版改了高德；
如果客户没有特别要求可以直接使用高德，高德有语言切换就不用写两遍了；
只一点建议看需求来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图多点标注</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body{width: 100%;box-sizing: border-box;padding: 1px 0;height: auto;}
			.mapwrap{width: 60%;height: 400px;position: relative;margin: 50px auto;}
			.mapcont{width: 100%;height: 100%;}
			/*.amap-icon*/
			.amap-icon img{transform:scale(0.6);}
			.amap-info-content p{font-size: 14px;line-height: 24px;color: #333333;}
			.amap-info-content p span{font-size: 18px;color: #333333;font-weight: bold;text-align: center;margin-bottom: 20px;}
			.amap-info-content{padding: 20px;}
		</style>
	</head>
	<body>
		
		<!-- map百度 -->
		<div class="mapwrap">
			<div class="mapcont" id="allmap"></div>
			<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=9gFLRLFljLV2FZNruahblQLIG2WLhGIr"></script>
			<script>
				var markerArr = [  
						{ title: "公司地址01", point: "106.593759,29.571931", address: "地址：重庆市渝中区朝天门街道接圣街8号"},  
						{ title: "公司地址", point: "112.886249,28.241908", address: "地址：中国 湖南长沙岳麓区旺龙路万为科"},
					];
					var map = new BMap.Map("allmap"); // 创建Map实例  
					var point = new BMap.Point(112.886249,28.241908); //地图中心点，广州市  
					map.centerAndZoom(point, 7); // 初始化地图,设置中心点坐标和地图级别。  
					map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
					//向地图中添加缩放控件  
					var ctrlNav = new window.BMap.NavigationControl({  
						anchor: BMAP_ANCHOR_TOP_LEFT,  
						type: BMAP_NAVIGATION_CONTROL_LARGE  
					});  
					map.addControl(ctrlNav);  
				  
					//向地图中添加缩略图控件  
					var ctrlOve = new window.BMap.OverviewMapControl({  
						anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
						isOpen: 1  
					});  
					map.addControl(ctrlOve);  
				  
					//向地图中添加比例尺控件  
					var ctrlSca = new window.BMap.ScaleControl({  
						anchor: BMAP_ANCHOR_BOTTOM_LEFT  
					});  
					map.addControl(ctrlSca);  
				  
					var point = new Array(); //存放标注点经纬信息的数组  
					var marker = new Array(); //存放标注点对象的数组  
					var info = new Array(); //存放提示信息窗口对象的数组  
					for (var i = 0; i < markerArr.length; i++) {  
						var p0 = markerArr[i].point.split(",")[0]; //  
						var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来  
						point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点  
						marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记  
						map.addOverlay(marker[i]);  
						marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
						//标注点
						
							// var content = "<h3>" + markerArr[i].title + "</h3>" + "<p>" + markerArr[i].address + "</p>"
							// var label = new window.BMap.Label(content, { offset: new window.BMap.Size(20, -10) });
							// marker[i].setLabel(label);
						  
						//标注点end
						
						var opts = {
						    width: 250,     // 信息窗口宽度
						    height: 100,    // 信息窗口高度
						};
						info[i] = new window.BMap.InfoWindow("<h3 style=font-size:20px;line-height:1.8em;color:#222;font-weight:bold;>" + markerArr[i].title + "</h3><p style=font-size:14px;line-height:1.6em;>地址：" + markerArr[i].address + "</p>",opts); // 创建信息窗口对象  
					}
					marker[0].openInfoWindow(info[0]);//默认打开第一个窗口
					marker[0].addEventListener("mousedown", function () {  
						this.openInfoWindow(info[0]);  
					});  
					marker[1].addEventListener("mousedown", function () {  
						this.openInfoWindow(info[1]);  
					});
					
			</script>
			
		</div>
		
		<!-- map高德 -->
		<div class="mapwrap">
			<div class="mapcont" id="gdmap"></div>
			<script src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script>
			<script src="http://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
			 <script>
				//初始化地图
				var map = new AMap.Map('gdmap', {
				  resizeEnable: true,
				  center: [112.886249,28.241908],
				  zoom: 6,
				  lang: "en" //可选值：en，zh_en, zh_cn
				});
				
				var markerArr = [{"title":"map01","point":"106.593759,29.571931","address":"Address: No. 8 Jiesheng Street, Chaotianmen Street, Yuzhong District, Chongqing"},{"title":"map02","point":"112.886249,28.241908","address":"Address: Room 1702, Building 1, Wanwei Science and Technology Industrial Park, Wanglong Road, Yuelu District, Changsha, Hunan, China"}];
				// 添加一些分布不均的点到地图上,地图上添加二个点标记，作为参照
				var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(15, -20)});
				for (var i = 0, marker; i < markerArr.length; i++) {
					var marker = new AMap.Marker({
						position: [markerArr[i].point.split(",")[0],markerArr[i].point.split(",")[1]],
						map: map,
						icon:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"
					});
					marker.content = "<p>" + "<span>" +  markerArr[i].title + "</span>" + "</br>" + markerArr[i].address + "</p>";
					marker.on('click', markerClick);
					marker.emit('click', {target: marker});
				};
				function markerClick(e) {
					infoWindow.setContent(e.target.content);
					infoWindow.open(map, e.target.getPosition());
				}
				map.setFitView();
				
			</script>
		</div>
		
		
	</body>
</html>