Home > Web Front-end > JS Tutorial > body text

Amap - display multiple information windows

黄舟
Release: 2017-02-18 13:09:25
Original
3393 people have browsed it

1. Problem background

Amap, set a small icon, and click the icon to display the information


2. Implementation source code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图展示多个信息窗口</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    
</head>
<body>
	<p id="container"></p>
	<script type="text/javascript">
	    //初始化地图对象,加载地图
	    var map = new AMap.Map("container", {
	    	      resizeEnable: true,
	    	       zoom:10
	            });
	    
	    //经度纬度
	    var lnglats = [
	        [114.069919,30.564255],
	        [114.461307,30.618634],
	        [114.509372,30.492096],
	        [114.525165,30.742646],
	        [114.620609,30.712543],
	        [114.547138,30.412779],
	        [113.902378,30.396789],
	        [114.15163,30.779228],
	        [114.676227,30.857067],
	        [114.162616,30.96782]
	    ];
	    
	    //人员信息
	    var student = [
	    	{name:"张思",age:"22",sex:"女"},
	    	{name:"李磊",age:"21",sex:"男"},
	    	{name:"吴雪",age:"22",sex:"女"},
	    	{name:"思雨",age:"23",sex:"女"},
	    	{name:"赵华",age:"24",sex:"男"},
	    	{name:"孙杨",age:"26",sex:"男"},
	    	{name:"钱思思",age:"20",sex:"女"},
	    	{name:"郑武",age:"22",sex:"男"},
	    	{name:"胡迪",age:"21",sex:"男"},
	    	{name:"司马云",age:"22",sex:"女"}
	    ];
	    
	    //初始化信息窗口
	    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
	    
	    //循环遍历
	    for (var i = 0, marker; i < lnglats.length; i++) 
	    {
	        var marker = new AMap.Marker({
	            position: lnglats[i],
	            map: map
	        });
	        marker.content = "人员位置<br><br>姓名:"+student[i].name+"<br>年龄:"+student[i].age+"<br>性别:"+student[i].sex;
	        marker.on(&#39;click&#39;, markerClick);
	        marker.emit(&#39;click&#39;, {target: marker});
	    }
	    
	    //点击事件
	    function markerClick(e) 
	    {
	        infoWindow.setContent(e.target.content);
	        infoWindow.open(map, e.target.getPosition());
	    }
	    map.setFitView();
	</script>
</body>
</html>
Copy after login


3. Implementation result

Amap - display multiple information windows

The above is the content of Amap - displaying multiple information windows. For more related content, please pay attention to PHP Chinese Net (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template