vue+腾讯地图怎么获取marker移动后的定位
您可以使用Vue和腾讯地图的API来获取marker移动后的定位。具体步骤如下:
- 创建一个腾讯地图实例,并在地图上添加一个marker。
<template>
<div id="map"></div>
</template>
<script>
import TencentMap from '@tencent/map';
export default {
name: 'Map',
data() {
return {
map: null,
marker: null
}
},
mounted() {
// 创建地图实例
this.map = new TencentMap.Map('map', {
center: new TencentMap.LatLng(39.92, 116.46),
zoom: 13
});
// 添加marker
this.marker = new TencentMap.Marker({
position: new TencentMap.LatLng(39.92, 116.46),
map: this.map
});
}
}
</script>
- 监听marker的dragend事件,当marker移动后获取其经纬度。
<template>
<div id="map"></div>
</template>
<script>
import TencentMap from '@tencent/map';
export default {
name: 'Map',
data() {
return {
map: null,
marker: null
}
},
mounted() {
// 创建地图实例
this.map = new TencentMap.Map('map', {
center: new TencentMap.LatLng(39.92, 116.46),
zoom: 13
});
// 添加marker
this.marker = new TencentMap.Marker({
position: new TencentMap.LatLng(39.92, 116.46),
map: this.map,
draggable: true
});
// 监听marker的dragend事件
TencentMap.event.addListener(this.marker, 'dragend', () => {
console.log(this.marker.getPosition().getLng(), this.marker.getPosition().getLat());
});
}
}
</script>
- 在dragend事件中获取marker的经纬度,并进行相应的操作。
<template>
<div id="map"></div>
</template>
<script>
import TencentMap from '@tencent/map';
export default {
name: 'Map',
data() {
return {
map: null,
marker: null,
position: null
}
},
mounted() {
// 创建地图实例
this.map = new TencentMap.Map('map', {
center: new TencentMap.LatLng(39.92, 116.46),
zoom: 13
});
// 添加marker
this.marker = new TencentMap.Marker({
position: new TencentMap.LatLng(39.92, 116.46),
map: this.map,
draggable: true
});
// 监听marker的dragend事件
TencentMap.event.addListener(this.marker, 'dragend', () => {
this.position = {
lng: this.marker.getPosition().getLng(),
lat: this.marker.getPosition().getLat()
};
console.log(this.position);
// 在这里可以进行相应的操作,比如将经纬度保存到数据库中
});
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/bnPs 著作权归作者所有。请勿转载和采集!