多坐标做信息弹窗

作者：曹え 5811
发布时间：2022-05-09 08:00:45
浏览次数：201

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模块名称</title>
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    
  <link rel="stylesheet" href="css/cui.css" />
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=2SRq4Zpj9SC596VE1QZhjRmqQD6v0zOL"></script>
  <script src="js/jquery.js"></script>
 <style>
  #container {
	  height:300px;
  }
 </style>
</head>
<body>
	
	 <div id="container"></div>
	 <div>
		 <button class="mapgo" data-a="116.404" data-b="39.925" data-title="故宫博物院" data-info="地址：北京市东城区王府井大街88号乐天银泰百货八层">位置1</button>
		 <button class="mapgo" data-a="116.404" data-b="39.915" data-title="故宫博物院" data-info="地址：北京市东城区王府井大街88号乐天银泰百货八层">位置2</button>
		 <button class="mapgo" data-a="116.400" data-b="39.935" data-title="故宫博物院" data-info="地址：北京市东城区王府井大街88号乐天银泰百货八层">位置3</button>
		 <button class="mapgo" data-a="116.395" data-b="39.925" data-title="故宫博物院" data-info="地址：北京市东城区王府井大街88号乐天银泰百货八层">位置4</button>
		 <button class="mapgo" data-a="116.415" data-b="39.931" data-title="故宫博物院" data-info="地址：北京市东城区王府井大街88号乐天银泰百货八层">位置5</button>
	 </div>
	 
	<script>
		
		
	var map = new BMapGL.Map('container');
	
	// 默认地图中心点
	map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
	map.enableScrollWheelZoom(true);
	
	var m = [];
	var a = [];
	var b = [];
	var c = [];
	var d = [];
	
	// 遍历坐标
	$('.mapgo').each(function(i){
		a[i] = $(this).data('a')
		b[i] = $(this).data('b')
		c[i] = $(this).data('title')
		d[i] = $(this).data('info')
		m[i] = new BMapGL.Marker(new BMapGL.Point(a[i], b[i]));
		map.addOverlay(m[i]);
		m[i].addEventListener("click", function(){
			mapOpen(a[i],b[i],c[i],d[i])
		}); 
		$(this).click(function(){
			mapOpen(a[i],b[i],c[i],d[i])
		})
	})
	
	// 信息弹窗
		function mapOpen(a,b,c,d){
			map.openInfoWindow(new BMapGL.InfoWindow(d, {
				width : 260,     // 信息窗口宽度
				height: 100,     // 信息窗口高度
				title :c 
			}), new BMapGL.Point(a, b)); //开启信息窗口
		}		
	
	</script>
   
</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏