console
<style>
#mapContainer {
width: 100%;
height: 400px;
margin: 0 0 2rem 0;
color: var(--bs-dark);
}
#mapContainer .amap-info {
max-width: 20rem;
line-height: 120%;
}
#mapContainer .amap-info h3 {
font-size: 16px;
margin: 4px 2px;
}
#mapContainer .amap-info p {
font-size: 14px;
margin: 4px 2px;
}
</style>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=67ff4344ba8815a5960ffca4d3f81a9d&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar"></script>
<div id="mapContainer"></div>
<script>
var scale = new AMap.Scale(),
toolBar = new AMap.ToolBar({
position: {
top: '20px',
right: '20px'
}
}),
overView = new AMap.HawkEye({
isOpen: false
}),
map = new AMap.Map("mapContainer", {
mapStyle: 'amap://styles/macaron',
zoom: 15,
center: [118.765267,32.049028],
showLabel: true
});
map.addControl(scale);
map.addControl(toolBar);
map.addControl(overView);
var places = [
[
'C',
'虎踞关工作区',
[118.762875,32.052952],
'南京市虎踞关34号',
'https://uri.amap.com/marker?position=118.75765271184646,32.05499091620857&coordinate=wgs84'
],
[
'B',
'水资源楼',
[118.764908,32.04751],
'南京市广州路225号',
'https://uri.amap.com/marker?position=118.7596873294397,32.04954872941855&coordinate=wgs84'
],
[
'A',
'院总部',
[118.765621,32.04695],
'南京市广州路223号',
'https://uri.amap.com/marker?position=118.76040081315683,32.048988999941635&coordinate=wgs84'
]
];
var infoWindow;
function showInfo(cor, name, desc, link) {
infoWindow = new AMap.InfoWindow({
position: cor,
content: `<h3>${name}</h3><p class="small mb-0">${desc}(<a href="${link}" target="_blank">导航至此</a>)</p>`
});
infoWindow.open(map);
}
function addPlace(data) {
let text = new AMap.Text({
text: data[0],
position: data[2],
anchor: 'center',
style: {
'background-color': '#cd071e',
'color': '#fff',
'border-radius': '50%',
'font-size': '10px',
'text-align': 'center',
'width': '22px',
'padding': '0',
'line-height': '22px'
}
});
text.on('click', () => {
showInfo(data[2], data[1], data[3], data[4]);
})
map.add(text);
}
places.forEach(function(item) {
addPlace(item);
});
let defaultDot = places[2];
showInfo(defaultDot[2], defaultDot[1], defaultDot[3], defaultDot[4]);
</script>