html已经导入了高德地图,如何在此基础上添加标记
时间: 2023-03-20 21:01:54 浏览: 69
要在HTML页面上添加高德地图标记,您需要使用JavaScript API来创建地图和标记对象,并将它们添加到地图中。以下是一个简单的示例:
1. 首先,在您的HTML文件中添加一个div元素来容纳地图,如下所示:
```html
<div id="map" style="width: 100%; height: 400px;"></div>
```
2. 在您的HTML文件中导入高德地图JavaScript API,如下所示:
```html
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
```
请注意,您需要将"您申请的key值"替换为您自己的高德地图API key。
3. 在JavaScript文件中创建地图对象并添加标记,如下所示:
```javascript
var map = new AMap.Map('map', {
center: [116.397428, 39.90923],
zoom: 13
});
var marker = new AMap.Marker({
position: [116.397428, 39.90923],
title: '北京市'
});
marker.setMap(map);
```
请注意,您需要将"您申请的key值"替换为您自己的高德地图API key。在上面的示例中,我们创建了一个地图对象并将其放置在指定的div元素中。然后,我们创建了一个标记对象,并将其添加到地图中。
您可以使用AMap.Marker的其他选项来自定义标记的外观和行为,例如设置图标、自定义信息窗口等。您可以在高德地图JavaScript API文档中找到更多关于标记的信息。