这是一段网站页面中引入高德地图，自定义样式信息窗体的代码。
这是显示的效果图：
点击链接可以看显示效果：高德地图自定义样式信息窗体查看
HTML 代码如下：
<!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>
<meta name="keywords" content="网站页面中引入高德地图,自定义样式信息窗体">
<meta name="description" content="这是一段网站页面中引入高德地图，自定义样式信息窗体的代码">
<meta property="og:title" content="网站页面中引入高德地图_自定义样式信息窗体_Awing">
<meta property="og:description" content="这是一段网站页面中引入高德地图，自定义样式信息窗体的代码">
<style>
html,
body,
#amap_container {
width: 100%;
height: 600px;
}
.mapdiv {
width: 100%;
height: 600px;
max-width: 800px;
margin: 50px auto;
}
@media (max-width: 767px) {
.mapdiv {
height: 440px;
}
#amap_container {
height: 440px;
}
}
@media (max-width: 360px) {
.mapdiv {
height: 350px;
}
#amap_container {
height: 350px;
}
}
.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;
}
.amap-icon img {
width: 25px;
height: 34px;
}
.amap-marker-label {
border: 1;
}
.location-info {
position: relative;
padding: 5px;
font-size: 14px;
margin: 0;
top: 0;
right: 0;
min-width: 0;
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
font-size: 12px;
padding: 10px 6px;
line-height: 20px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
.info-middle img {
float: left;
margin-right: 6px;
}
</style>
</head>
<body>
<div class="mapdiv">
<div id="amap_container"></div>
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=bdcdd0218160ffdce88acd120a72068d"></script>
<script type="text/javascript">
var infoWindow;
var locationt_date = [109.613299, 23.115731];
var zoom = 14;
var marker, map;
createMap();
function createMap() {
map = new AMap.Map("amap_container", {
resizeEnable: true,
center: locationt_date,
zoom: zoom
});
if (window.innerWidth <= 360) {
map.setZoom(12);
}
if (window.innerWidth <= 780) {
map.setZoom(13);
}
addMarker();
}
// 实例化点标记
function addMarker() {
marker = new AMap.Marker({
icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
position: locationt_date,
offset: new AMap.Pixel(-13, -30)
});
//鼠标点击marker弹出自定义的信息窗体
marker.on('click', function () {
infoWindow.open(map, marker.getPosition());
});
// 设置鼠标划过点标记显示的文字提示
// marker.setTitle('我是marker的title');
//实例化信息窗体
// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
marker.setLabel({
direction: 'right',
offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
content: "<div class='location-info'>XX公司</div>", //设置文本标注内容
});
marker.setMap(map);
}
//关闭信息窗体
function closeInfoWindow() {
map.clearInfoWindow();
}
var title = 'XX公司',
content = [];
content.push("地址：贵港市布山大道XX号");
// content.push("电话：18907858338");
content.push("<a href='https://amap.com/search?query=%E8%B4%B5%E6%B8%AF%E5%92%8C%E8%AF%9A%E5%B9%BF%E5%91%8A%E4%BC%A0%E5%AA%92%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&city=450800&geoobj=109.607102%7C23.112976%7C109.618664%7C23.119095&zoom=17.5'>地图导航</a>");
infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
AMap.plugin([
'AMap.ToolBar',
], function () {
// 在图面添加工具条控件, 工具条控件只有缩放功能
map.addControl(new AMap.ToolBar());
});
infoWindow.open(map, marker.getPosition());
//构建自定义信息窗体
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("img");
top.className = "info-top";
titleD.innerHTML = title;
closeX.src = "https://webapi.amap.com/images/close2.gif";
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";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
}
</script>
</body>
</html>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
