效果图1，不加关闭信息窗口按钮
代码如下：
1.public/index.html页面里引入高德地图
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key"></script>
2.页面代码
<template>
<div class="screebox mapview">
<div id="mapContainer" style="width: 100%; height: calc(100vh - 140px);"></div>
</div>
</template>
<script>
var map
export default {
name: 'scree',
components: {
},
computed: {},
data() {
return {
}
},
watch: {},
mounted() {
this.initMap();
},
created() { },
methods: {
initMap() {
let than = this
// 初始化地图实例，设置中心点坐标和缩放级别
map = new AMap.Map('mapContainer', {
resizeEnable: true,
center: [117.211941, 39.19778], // 中心点坐标（经度，纬度）
zoom: 15 // 初始缩放级别
});
var markers = [{
title: 'title1',
icon: 'https://dingzhi.vipin.net.cn/uploads/store/comment/20250211/368ce949e1790d7fe5b25401ab746b1e.png',
position: [117.211941, 39.19778]
}, {
title: 'title2',
icon: 'https://dingzhi.vipin.net.cn/uploads/store/comment/20250211/20531171e5aaf7b277bda374b386d700.png',
position: [117.209447, 39.195732]
}, {
title: 'title3',
icon: 'https://dingzhi.vipin.net.cn/uploads/store/comment/20250210/b03609c36ec3e6072a09ec4276e4f625.png',
position: [117.210525, 39.191866]
}];
markers.forEach(function (marker) {
var markerbox = new AMap.Marker({
map: map,
icon: new AMap.Icon({
image: marker.icon,
size: new AMap.Size(52, 52), //图标大小
imageSize: new AMap.Size(26, 26)
}),
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-13, -30)
});
var content = []
var str = "<div>1:hhha</div>"
var str2 = "<div>2:hhha</div>"
content.push(str);
content.push(str2);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(0, -30),
content: than.createInfoWindow(marker.title, content)
});
markerbox.on('click', function () {
infoWindow.open(map);
});
});
},
//初始化信息窗口
createInfoWindow(title, content) {
var info = document.createElement("div");
info.className = "dotclass";
info.style.padding = '5px';
// 定义顶部标题
var top = document.createElement("div");
var titleD = document.createElement("div");
top.className = "topstyle";
top.style.fontSize = '15px';
titleD.innerHTML = title;
top.appendChild(titleD);
info.appendChild(top);
// 定义中部内容
var centrebox = document.createElement("div");
centrebox.className = "centreBox";
content.map(item => {
var middle = document.createElement("div");
middle.className = "info-middle";
// middle.style.fontSize = '12px';
middle.innerHTML = item;
centrebox.appendChild(middle);
})
info.appendChild(centrebox);
// 向下指示箭头
var down = document.createElement("div");
// down.style.fontSize = '15px';
down.className = "downbox";
down.innerHTML = '<div class="daosanjiao"></div>';
info.appendChild(down);
return info;
},
},
};
</script>
<style>
.mapview .downbox .daosanjiao {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 12px solid #534b4b;
margin: 0 auto;
}
.mapview .topstyle {
background-color: #c7c7c7;
padding: 2px 10px;
font-size: 20px;
color: #535151;
min-width: 50px;
}
.mapview .dotclass {
width: 200px;
color: #00FFD4;
}
.mapview .centreBox{
background: #d7d4d4;
padding: 2px 3px;
}
</style>
<style scoped>
.screebox {
width: 100%;
min-height: calc(100vh - 140px);
/* background-color: pink; */
}
</style>
效果2：加信息关闭按钮
代码：
<template>
<div class="screebox mapview">
<div id="mapContainer" style="width: 100%; height: calc(100vh - 140px);"></div>
</div>
</template>
<script>
var map
export default {
name: 'scree',
components: {
},
computed: {},
data() {
return {
}
},
watch: {},
mounted() {
this.initMap();
},
created() { },
methods: {
initMap() {
let than = this
// 初始化地图实例，设置中心点坐标和缩放级别
map = new AMap.Map('mapContainer', {
resizeEnable: true,
center: [117.211941, 39.19778], // 中心点坐标（经度，纬度）
zoom: 15 // 初始缩放级别
});
var markers = [{
title: 'title1',
icon: 'https://dingzhi.vipin.net.cn/uploads/store/comment/20250211/368ce949e1790d7fe5b25401ab746b1e.png',
position: [117.211941, 39.19778]
}, {
title: 'title2',
icon: 'https://dingzhi.vipin.net.cn/uploads/store/comment/20250211/20531171e5aaf7b277bda374b386d700.png',
position: [117.209447, 39.195732]
}, {
title: 'title3',
icon: 'https://dingzhi.vipin.net.cn/uploads/store/comment/20250210/b03609c36ec3e6072a09ec4276e4f625.png',
position: [117.210525, 39.191866]
}];
markers.forEach(function (marker) {
var markerbox = new AMap.Marker({
map: map,
icon: new AMap.Icon({
image: marker.icon,
size: new AMap.Size(52, 52), //图标大小
imageSize: new AMap.Size(26, 26)
}),
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-13, -30)
});
var content = []
var str = "<div>经纬度:" + marker.position + "</div>"
var str2 = "<div>2:hhha</div>"
content.push(str);
content.push(str2);
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(0, -30),
content: than.createInfoWindow(marker.title, content, infoWindow)
});
markerbox.on('click', function () {
infoWindow.open(map);
});
});
},
//初始化信息窗口
createInfoWindow(title, content, infoWindow) {
let than = this
var info = document.createElement("div");
info.className = "dotclass";
info.style.padding = '5px';
// 定义顶部标题
var top = document.createElement("div");
top.className = "topstyle";
top.style.fontSize = '15px';
var titleD = document.createElement("div");
titleD.innerHTML = title;
var close = document.createElement("div"); //关闭信息窗口容器
close.className = "closebox";
close.innerHTML = '<img onclick="closeInfoWindowClick()" src="https://dingzhi.vipin.net.cn/uploads/store/comment/20250211/e07db12a853e737b016f95726bfd9715.png" alt="">';
titleD.appendChild(close);
top.appendChild(titleD);
info.appendChild(top);
// 定义中部内容
var centrebox = document.createElement("div");
centrebox.className = "centreBox";
content.map(item => {
var middle = document.createElement("div");
middle.className = "info-middle";
// middle.style.fontSize = '12px';
middle.innerHTML = item;
centrebox.appendChild(middle);
})
info.appendChild(centrebox);
// 向下指示箭头
var down = document.createElement("div");
// down.style.fontSize = '15px';
down.className = "downbox";
down.innerHTML = '<div class="daosanjiao"></div>';
info.appendChild(down);
const win = window
win.closeInfoWindowClick = () => {
// 关闭信息窗口方法
// 调用methods里面的方法
than.closeHalen()
}
return info;
},
closeHalen() {
// 关闭信息窗口
map.clearInfoWindow();
}
},
};
</script>
<style>
.mapview .downbox .daosanjiao {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 12px solid #534b4b;
margin: 0 auto;
}
.mapview .topstyle {
background-color: #c7c7c7;
padding: 2px 10px;
font-size: 20px;
color: #535151;
min-width: 50px;
}
.mapview .closebox {
float: right;
}
.mapview .closebox img {
width: 16px;
height: 16px;
}
.mapview .closebox img:hover {
cursor: pointer;
}
.mapview .dotclass {
width: 200px;
color: #00FFD4;
}
.mapview .centreBox {
background: #d7d4d4;
padding: 2px 3px;
}
</style>
<style scoped>
.screebox {
width: 100%;
min-height: calc(100vh - 140px);
/* background-color: pink; */
}
</style>
