自定义高德地图的标记样式和内容

时间:2024-02-21 16:33:08

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

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;
for(var i=0;i<this.CompanyCommunityList.length;i++){
data_com.push({ "x":thit.CompanyCommunityList[i].longitude , "y":thit.CompanyCommunityList[i].latitude });
}
var list={
"size":thit.CompanyCommunityList.length,
"data":data_com
}
for(var j = 0;j < list.size; j++){
var myObj= list.data[j];
var myLngLat=new AMap.LngLat(myObj.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.appendChild(markerImg);

// 点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.className = \'marker-span\';
markerSpan.innerHTML = thit.CompanyCommunityList[j].communityName;
markerContent.appendChild(markerSpan);

// 点标记中的数字
var markerNum = document.createElement("span");
markerNum.className = \'marker-number\';
markerNum.innerHTML = \'3\';
markerContent.appendChild(markerNum);

marker.setContent(markerContent); //更新点标记内容
marker.setPosition(myLngLat); //更新点标记位置
}
},