Maison > interface Web > js tutoriel > Amap - afficher plusieurs fenêtres d'informations

Amap - afficher plusieurs fenêtres d'informations

黄舟
Libérer: 2017-02-18 13:09:25
original
3398 Les gens l'ont consulté

1. Contexte du problème

Sur Amap, définissez une petite icône et cliquez sur l'icône pour afficher les informations


2. Code source de mise en œuvre

<!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>
Copier après la connexion


3.

Amap - afficher plusieurs fenêtres dinformations

Ce qui précède est le contenu d'Amap - affichant plusieurs fenêtres d'informations, veuillez faire attention à plus de contenu connexe Site Web PHP chinois (www.php.cn) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal