//创建地图 ditu_add 容器ID
var map = new AMap.Map('ditu_add', {
zoom: 12, //级别
center: [118.326443, 35.065282], //中心点坐标
viewMode: '3D', //使用3D视图
mapStyle: "amap://styles/8ce81794726a2f639a98dc3873d40114"//地图皮肤
});
var mess;
//设置自定义 点样式,根据后台返回的数据中 style:0 字段可现实不同照片
var style = [{
url: 'img/sh1.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(30,30),
zIndex: 4
},{
url: 'img/sh2.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(30,30),
zIndex: 4
},{
url: 'img/sh3.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(30,30),
zIndex: 4
}]
//创建海量点
//dt为数据 :
/* address: "XXX街道"
babh: ""
color: "yellow"
dpzb: "128.225348,25.155108"
jyz: "黄海滨"
lnglat: [[118.225398],[35.155108]]
overtime: null
style: 0
数据都会被存到点里面
*/
mass = new AMap.MassMarks(dt, {
opacity: 1,
zIndex: 111,
cursor: 'pointer',
style: style
})
//点击事件 点击后弹窗
//所有数据都可以在 e 里面获取到
mass.on('click', function(e) {
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content:"<div>hello</div>",
size: new AMap.Size(0, 0),
autoMove: true,
offset: new AMap.Pixel(10, 0)
})
infoWindow.open(map, [e.data.lnglat.lng, e.data.lnglat.lat]);
})
mass.setMap(map);
// 弹窗关闭
function closeInfoWindow() {
map.clearInfoWindow();
}
高德地图JS添加海量点
最新推荐文章于 2024-05-28 15:44:10 发布