高德地设置标记点,高德地自定义标注

利用循环添加多个点标记:

addMarkersMethod){

var map = new AMap.Map’gaode’, {

resizeEnable: true,

//center: this.CompanyCommunityList.length ? [this.CompanyCommunityList[0].longitude, this.CompanyCommunityList[0].latitude] : this.mapCenter,

center: this.mapCenter,

zoom: 5

});

//声明一个list

let data_com = [];

let thit = this;

forvar i=0;i

data_com.push{ “x”:thit.CompanyCommunityList[i].longitude , “y”:thit.CompanyCommunityList[i].latitude });

}

var list={

“size”:thit.CompanyCommunityList.length,

“data”:data_com

}

forvar j = 0;j < list.size; j++){

var myObj= list.data[j];

var myLngLat=new AMap.LngLatmyObj.x,myObj.y);

var marker = new AMap.Marker{

position: myLngLat,

map: map,

clickable: true,

});

// 自定义点标记内容

var markerContent = document.createElement”div”);

// 点标记中的图标

var markerImg = document.createElement”img”);

markerImg.className = “markerlnglat”;

markerImg.src = “/static/images/icon/ditu.png”;

markerContent.appendChildmarkerImg);

// 点标记中的文本

var markerSpan = document.createElement”span”);

markerSpan.className = ‘marker-span’;

markerSpan.innerHTML = thit.CompanyCommunityList[j].communityName;

markerContent.appendChildmarkerSpan);

// 点标记中的数字

var markerNum = document.createElement”span”);

markerNum.className = ‘marker-number’;

markerNum.innerHTML = ‘3’;

markerContent.appendChildmarkerNum);

marker.setContentmarkerContent); //更新点标记内容

marker.setPositionmyLngLat); //更新点标记位置

}

},

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注