首页高德地图添加marker点

高德地图添加marker点

时间: 2024-01-08 08:37:24 浏览: 351

要在高德地图上添加 marker 点，可以按照以下步骤进行： 1. 引入高德地图 JavaScript API 库在 HTML 页面中引入高德地图 JavaScript API 库，可以在官网上下载或使用 CDN 引入。 2. 创建地图使用 `new AMap.Map()` 方法创建一个地图实例，指定地图容器的 ID 和地图的中心点和缩放级别。 ``` var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); ``` 3. 创建 marker 点使用 `new AMap.Marker()` 方法创建一个 marker 点，指定 marker 点的位置和其他属性。 ``` var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这是一个 marker 点', icon: 'https://webapi.amap.com/images/0.png' }); ``` 4. 将 marker 点添加到地图中使用 `map.add(marker)` 方法将 marker 点添加到地图中。 ``` map.add(marker); ``` 完整的代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图添加 marker 点</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图 API Key"></script> <style type="text/css"> #mapContainer { width: 100%; height: 500px; } </style> </head> <body> <div id="mapContainer"></div> <script type="text/javascript"> var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这是一个 marker 点', icon: 'https://webapi.amap.com/images/0.png' }); map.add(marker); </script> </body> </html> ```

阅读全文