在HTML模板中添加地图标记图标,然后使用JavaScript代码将地图定位到当前位置
时间: 2023-05-24 15:07:17 浏览: 233
1. 在HTML模板中,可以使用以下代码来添加地图容器和地图标记图标:
```html
<div id="map"></div>
<div id="marker"></div>
```
其中,`id="map"`是用来存放地图容器的标签,`id="marker"`是用来存放地图标记图标的标签。
2. 在JavaScript代码中,可以使用以下代码来将地图定位到当前位置并显示地图标记图标:
```javascript
// 获取当前位置
navigator.geolocation.getCurrentPosition(function(position) {
// 创建地图对象
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: position.coords.latitude, lng: position.coords.longitude},
zoom: 15
});
// 创建标记对象
var marker = new google.maps.Marker({
position: {lat: position.coords.latitude, lng: position.coords.longitude},
map: map,
title: '当前位置'
});
});
```
其中,`navigator.geolocation.getCurrentPosition()`是一个获取用户位置的方法,`position.coords.latitude`和`position.coords.longitude`分别表示当前位置的纬度和经度,`google.maps.Map()`是创建一个新的地图对象,`center`表示地图中心的坐标,`zoom`表示地图缩放级别,`google.maps.Marker()`则是创建一个新的标记对象,`position`表示标记的位置,`map`表示将标记添加到哪个地图对象上,`title`则是标记图标上的提示文字。