高德地图中添加标记marker点
时间: 2024-02-03 17:02:59 浏览: 134
对地图添加标记
在高德地图中添加标记点(Marker)可以通过以下步骤实现:
1. 引入高德地图 JavaScript API
在 HTML 文件中引入高德地图 JavaScript API,例如:
```html
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
```
其中 `key` 值需要替换为您自己申请的高德地图开发者 Key。
2. 创建地图容器
在 HTML 文件中创建一个地图容器,例如:
```html
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
```
该容器的宽度和高度可以根据实际需求进行调整。
3. 创建地图对象
在 JavaScript 中创建地图对象,并将其显示在地图容器中,例如:
```javascript
var map = new AMap.Map('mapContainer', {
center: [116.397428, 39.90923],
zoom: 13
});
```
其中 `center` 表示地图的中心点坐标,`zoom` 表示地图的缩放级别。
4. 添加标记点
通过 `AMap.Marker` 类创建一个标记点对象,并设置其位置、图标等属性,例如:
```javascript
var marker = new AMap.Marker({
position: [116.397428, 39.90923],
icon: 'https://webapi.amap.com/images/marker_sprite.png'
});
```
其中 `position` 表示标记点的位置坐标,`icon` 表示标记点的图标。如果不设置图标,则默认使用高德地图提供的红色图钉样式。
5. 将标记点添加到地图中
通过 `AMap.Map` 对象的 `add` 方法将标记点添加到地图中,例如:
```javascript
map.add(marker);
```
完成以上步骤后,您就可以在高德地图中看到一个带有标记点的地图了。
阅读全文