高德地图多点标记自定义地图
直接代码吧：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定义地图</title>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
<!-- <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/resource/capitals.js'></script> -->
<script src="https://webapi.amap.com/maps?v=1.4.12&key=您自己的key"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
html,body,#container{height:100%;width: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;width: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{width: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)}
</style>
</head>
<body>
<div id="container"></div>
<script>
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: "<div class = 'area'>星河word</div>"
}, {
adcode: "",
center: [114.384129, 30.508543],
citycode: "3803",
name: "保利华都",
text: '这是保利华都小区',
content: "<div class = 'area'>保利华都</div>"
}]
//实例化信息窗体
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();
}
</script>
</body>
</html>
