Advertisement

android高德marker添加点击,高德地图上添加marker,给每一个marker添加点击事件。...

阅读量:

高德地图上添加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({

设置位置为新创建一个AMap类型中的LngLat实例(代表地理坐标),该实例的参数为当前条目中的纬度和经度,并且该对象也可以表示为一个由经纬度组成的数值一维数组[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 =

'

  • 设备信息

  • 位置: ' +

list[j].NAME +

'

  • 纬度: ' +

list[i].LATITUDE +

'

  • 精度: ' +

list[i].LONGITUDE +

'

  • 运行状态: 正常

'>点击查看

'>资产台帐

×'

// 更改弹窗口

$('#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

}

)

})

全部评论 (0)

还没有任何评论哟~