android高德地图显示多点标记,高德地图多点标记自定义地图

直接代码吧：

自定义地图

html,body,#container{height:100%;100%;font-size:14px;font-family:"Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}

.content-window-card{position:relative;box-shadow:none;bottom:0;left:0;auto;padding:0;border-radius:5px;overflow:hidden;}

.info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}

.closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}

.info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}

.info-bottom{height:12px;position:relative}

.sharp{0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}

var map = new AMap.Map('container', {

resizeEnable: true,

zoom: 5,

center: [114.047614, 22.600735],

mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',

viewMode: '3D', //开启3D视图,默认为关闭

buildingAnimation: true, //楼块出现是否带动画

//前往创建自定义地图样式：https://lbs.amap.com/dev/mapstyle/index

});

var capitals = [{

adcode: "",

center: [114.063185, 22.60495],

citycode: "1853",

name: "星河word",

text: '这是星河word小区',

content: "

星河word

"

}, {

adcode: "",

center: [114.384129, 30.508543],

citycode: "3803",

name: "保利华都",

text: '这是保利华都小区',

content: "

保利华都

"

}]

//实例化信息窗体

var title = '提示';

var infoWindowArr = [],

facilities = [];

for (var i = 0; i < capitals.length; i++) {

var marker = new AMap.Marker({

position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),

offset: new AMap.Pixel(-10, -10),

icon: 'http://vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL

title: capitals[i].name,

});

facilities.push(marker);

var infoWindow = new AMap.InfoWindow({

isCustom: true, //使用自定义窗体

content: createInfoWindow(title, capitals[i].content),

offset: new AMap.Pixel(0, -20)

});

infoWindowArr.push(infoWindow);

}

map.add(facilities);

for (var i = 0; i < facilities.length; i++) {

(function(i) {

facilities[i].on('click', function(event) {

infoWindowArr[i].open(map, event.target.getPosition());

});

})(i)

}

//构建自定义信息窗体

function createInfoWindow(title, content) {

var info = document.createElement("div");

info.className = "custom-info input-card content-window-card";

//可以通过下面的方式修改自定义窗体的宽高

info.style.width = "300px";

// 定义顶部标题

var top = document.createElement("div");

var titleD = document.createElement("div");

var closeX = document.createElement("span");

top.className = "info-top";

titleD.innerHTML = title;

closeX.innerHTML = "×";

closeX.className = "closeX";

closeX.onclick = closeInfoWindow;

top.appendChild(titleD);

top.appendChild(closeX);

info.appendChild(top);

// 定义中部内容

var middle = document.createElement("div");

middle.className = "info-middle";

middle.style.backgroundColor = 'white';

middle.innerHTML = content;

info.appendChild(middle);

// 定义底部内容

var bottom = document.createElement("div");

bottom.className = "info-bottom";

var sharp = document.createElement("span");

sharp.className = "sharp";

bottom.appendChild(sharp);

info.appendChild(bottom);

return info;

}

//关闭信息窗体

function closeInfoWindow() {

map.clearInfoWindow();

}