高德地图自定义点标记大小_自定义高德地图的标记样式和内容

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

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

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); //更新点标记位置

}

},