vue 地图选点组件反显 腾讯
时间: 2023-08-17 21:04:40 浏览: 62
地图选点组件反显可以通过以下步骤实现:
1. 首先在 Vue 组件中引入腾讯地图 JavaScript API。
```
<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
```
2. 在组件中定义地图容器和地图对象。
```
<template>
<div id="map-container"></div>
</template>
<script>
export default {
data() {
return {
map: null,
marker: null
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = new qq.maps.Map(document.getElementById("map-container"), {
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 13
});
qq.maps.event.addListener(this.map, "click", event => {
this.addMarker(event.latLng);
});
},
addMarker(latLng) {
if (this.marker) {
this.marker.setMap(null);
}
this.marker = new qq.maps.Marker({
position: latLng,
map: this.map
});
}
}
};
</script>
```
3. 在 addMarker 方法中添加反显逻辑。
```
addMarker(latLng) {
if (this.marker) {
this.marker.setMap(null);
}
this.marker = new qq.maps.Marker({
position: latLng,
map: this.map
});
qq.maps.convertor.translate([latLng], 1, result => {
const reverseGeocoder = new qq.maps.Geocoder({
complete: result => {
if (result.detail.addressComponents) {
const address = result.detail.addressComponents;
console.log(address.city + address.district + address.street);
}
}
});
reverseGeocoder.getAddress(latLng);
});
}
```
4. 在 convertor.translate 方法中使用腾讯地图 API 的逆地址解析功能获取反显地址信息。
```
qq.maps.convertor.translate([latLng], 1, result => {
const reverseGeocoder = new qq.maps.Geocoder({
complete: result => {
if (result.detail.addressComponents) {
const address = result.detail.addressComponents;
console.log(address.city + address.district + address.street);
}
}
});
reverseGeocoder.getAddress(latLng);
});
```
这样就可以实现地图选点组件反显功能了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)