<template>
|
|
<el-dialog :title="props.title" v-model="dialogVisble" width="100%">
|
<div>
|
|
<p> 经纬度：{{ loc.lat }},{{ loc.lon }}</p>
|
<p>地址：{{ loc.address }}</p>
|
<div id="container" style="width:100%;height:450px" ref="container">
|
|
</div>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="close">取 消</el-button>
|
<el-button type="primary" @click="confirm">确 定</el-button>
|
</span>
|
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from 'vue';
|
// 定义控制弹窗显隐的变量
|
var times
|
const dialogVisble = ref(false)
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "提示"
|
}
|
})
|
const container = ref(null)
|
const loc = ref({
|
lon: 104.07,
|
lat: 30.67,
|
address: "",
|
})
|
|
watch(() => dialogVisble.value,
|
(val, o) => {
|
console.log('val is ', val)
|
|
}
|
)
|
|
onMounted(() => {
|
console.log(1111)
|
var times = setTimeout(() => {
|
initmap()
|
}, 9000);
|
|
|
})
|
|
const initmap = () => {
|
var center = new TMap.LatLng(loc.value.lat, loc.value.lon);//设置中心点坐标
|
const mapContainer = document.getElementById('container');
|
console.log("mapContainer:", mapContainer)
|
if (mapContainer) {
|
clearTimeout(times)
|
}
|
//初始化地图
|
var map = new TMap.Map(mapContainer, {
|
center: center,
|
zoom: 14, //设置地图缩放级别
|
});
|
var markerGeo = {
|
id: 'center',
|
position: map.getCenter(),
|
};
|
|
//创建并初始化MultiMarker
|
var markerLayer = new TMap.MultiMarker({
|
map: map, //指定地图容器
|
//样式定义
|
geometries: [
|
markerGeo
|
]
|
})
|
var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
|
//绑定点击事件
|
map.on("click", function (evt) {
|
let poi = evt.poi;
|
console.log('event is ', evt)
|
console.log('poi is ', poi)
|
var lat = evt.latLng.getLat().toFixed(6);
|
var lng = evt.latLng.getLng().toFixed(6);
|
loc.value.lon = lng;
|
loc.value.lat = lat
|
|
// markerGeo.position = map.getCenter();
|
// markerLayer.updateGeometries([markerGeo]);
|
var location = new TMap.LatLng(lat, lng);
|
geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
|
.then((result) => {
|
loc.value.address = result.result.address + (poi ? poi.name : '')
|
});
|
map.setCenter(new TMap.LatLng(lat, lng));//坐标为天安门
|
// flushLatLon()
|
})
|
}
|
const emit = defineEmits(["click"])
|
const confirm = () => {
|
emit("click", loc.value)
|
|
// dialogVisble.value = false
|
}
|
|
const close = () => {
|
dialogVisble.value = false
|
}
|
|
// 将变量暴露出来
|
defineExpose({
|
dialogVisble
|
})
|
</script>
|
|
<style></style>
|
