SOURCE

console 命令行工具 X clear

                    
>
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&amp;key=67ff4344ba8815a5960ffca4d3f81a9d&amp;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>