vue3 腾讯地图拖动标记获取经纬度
时间: 2023-08-07 12:06:43 浏览: 195
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换demo
你可以使用腾讯地图的 `Marker` 类来创建标记,并且监听 `dragend` 事件来获取标记位置的经纬度信息。具体实现如下:
1. 在 HTML 中添加地图容器和标记容器:
```html
<div id="map"></div>
<div id="marker"></div>
```
2. 在 JavaScript 中创建地图和标记:
```javascript
// 初始化地图
var map = new qq.maps.Map(document.getElementById("map"), {
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 13,
});
// 创建标记
var marker = new qq.maps.Marker({
position: map.getCenter(),
draggable: true,
map: map,
});
// 监听标记拖动结束事件
qq.maps.event.addListener(marker, "dragend", function (event) {
// 获取标记位置的经纬度信息
var latLng = marker.getPosition();
console.log("经度:" + latLng.getLng() + ",纬度:" + latLng.getLat());
});
```
这样就可以在地图上拖动标记,并且在控制台中输出标记位置的经纬度信息了。
阅读全文