<!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://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
height: 100%;
width: 100%;
}
.amap-icon img,
.amap-marker-content img {
width: 25px;
height: 34px;
}
.marker {
position: absolute;
top: -20px;
right: -118px;
color: #fff;
padding: 4px 10px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25A5F7;
border-radius: 3px;
}
.input-card {
width: 18rem;
z-index: 170;
}
.input-card .btn {
margin-right: .8rem;
}
.input-card .btn:last-child {
margin-right: 0;
}
</style>
//窗口的样式
<style>
.windowStyle {
max-width: 300px;
max-height: 300px;
overflow: auto;
}
.windowStyle1 {
background: #fff;
padding: 10px;
border: 1px solid #bad7ef;
border-radius: 10px;
}
.windowStyle1 .info-top {
font-size: 16px;
font-weight: 600;
}
.windowStyle1 .info-middle {
margin: 6px 0px;
}
.unitBox {
margin-top: 6px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
var marker = [] // 定义一个数组放点
// 需要显示的点
let arr = [
{
piont: [116.406315, 39.908775],
company: '哪儿都通公司'
},
{
piont: [116.426315, 39.978775],
company: '哪儿都不通公司'
}
]
// 实例化点标记
function addMarker() {
// 循序处理点数据
arr.forEach(el => {
let m = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
position: el.piont,
offset: new AMap.Pixel(-13, -30)
});
// 添加窗口需要的信息
m.InfoTitle = "企业信息";
m.infoContent = {
company: el.company,
};
// 添加事件
m.on("mouseover", function (e) {
infoWindow = new AMap.InfoWindow({
isCustom: true,
content: infoWindowStyle1(e.target),
offset: new AMap.Pixel(16, -25),
});
infoWindow.open(map, m.getPosition());
});
m.on("mouseout", function () {
closeInfoWindow();
});
marker.push(m)
});
marker.forEach(el => {
el.setMap(map);
});
map.setFitView(marker);
}
// 定义窗口
function infoWindowStyle1(target) {
let content = target.infoContent;
var info = document.createElement("div");
info.className = "custom-info windowStyle windowStyle1";
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
var closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = target.InfoTitle;
top.appendChild(titleD);
info.appendChild(top);
// 中部
var middle = document.createElement("div");
middle.className = "info-middle styleWindOnfoMiddle";
middle.style.backgroundColor = "white";
// =======一个单元的div
var unitBox = document.createElement("div");
unitBox.className = "unitBox";
var unitTitle = document.createElement("span");
var unitContent = document.createElement("span");
unitTitle.innerHTML = "机构名称:";
unitContent.innerHTML = content.company;
unitBox.appendChild(unitTitle);
unitBox.appendChild(unitContent);
middle.appendChild(unitBox);
//====
info.appendChild(middle);
return info;
}
// 清除窗口
function closeInfoWindow (){
map.clearInfoWindow()
}
// 清除 marker
function clearMarker() {
if (marker) {
marker.forEach(el => {
el.setMap(null);
});
marker = [];
}
}
addMarker()
</script>
</body>
</html>