1、問題背景

高德地圖，設置小圖標，并點擊圖標顯示信息

2、實現源碼

高德地圖展示多個信息窗口

//初始化地圖對象，加載地圖

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 = "人員位置
姓名："+student[i].name+"
年齡："+student[i].age+"
性別："+student[i].sex;

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();

3、實現結果

總結

以上是生活随笔為你收集整理的js如何同时打开多个信息窗口 高德地图_高德地图-展示多个信息窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。