高德地图上添加marker，给每一个marker添加点击事件。
高德地图上添加marker，给每一个marker添加点击事件。javascript
var watch = []
$.ajax({
type: 'GET',
dataType: 'jsonp',
url:
url +
'你的url地址',
error: function() {
alert('获取监控点信息失败')
},
success: function(data) {
var json = data.QueryUDCAMERAINFOResponse
json = json.UDCAMERAINFOSet.UDCAMERA
$.each(json, function(index, item) {
if (json[index].LATITUDE && json[index].LONGITUDE) {
// console.log(json[index])
watch.push(json[index])
// console.log(watch)
}
})
watchMap(watch)
}
})
function watchMap(list) {
var watchList = []
// 添加多个地图点标记
for (let i = 0; i < list.length; i++) {
var temp = new AMap.Marker({
position: new AMap.LngLat(list[i].LONGITUDE, list[i].LATITUDE), // 经纬度对象，也能够是经纬度构成的一维数组[116.39, 39.9]
title: list[i].NAME,
map: map,
icon: 'imgs/sxt.png',
clickable: true
})
watchList.push(temp)
// 给每一个点标记注册点击事件
AMap.event.addListener(temp, 'click', function(e) {
$('#watch').hide(300)
//获得的数据
for (let j = 0; j < list.length; j++) {
if (this.B.title == list[j].NAME) {
// 点击摄像头标记，切换中心坐标
map.setCenter([list[i].LONGITUDE, list[i].LATITUDE])
var str =
'
×'// 更改弹窗口
$('#watch').html(str)
$('#watch')
.css({
left: '50%',
top: '50%'
})
.show(300)
$('#closeWatch').click(function() {
$('#watch').hide(300)
})
$('#openMp4').click(function() {
$('.playerMp4')
.css({
height: $(window).height()
})
.show(300)
$('.radio_top_title').html(list[j].NAME)
$('#watch').hide(300)
})
}
}
})
}
// 将建立的点标记添加到已有的地图实例：
map.add(watchList)
// 利用styles属性修改点聚合的图标样式
var styles = [
{
url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -30)
},
{
url: 'https://a.amap.com/jsapi_demos/static/images/green.png',
size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18)
},
{
url: 'https://a.amap.com/jsapi_demos/static/images/orange.png',
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -45)
}
]
//添加聚合组件
map.plugin(['AMap.MarkerClusterer'], function() {
cluster = new AMap.MarkerClusterer(
map, // 地图实例
watchList, // 海量点组成的数组
{
styles: styles
}
)
})
