|
|
|
|
@ -1,7 +1,19 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div :id="mapContainerName" class="map-box"></div>
|
|
|
|
|
<a-input-search class="inputbox" v-model:value="address" enter-button placeholder="请输入地址" @search="searchAddress" />
|
|
|
|
|
<div class="inputbox">
|
|
|
|
|
<a-input-search v-model:value="address" enter-button placeholder="请输入地址" @search="searchAddress" />
|
|
|
|
|
<div class="addressbox" v-if="optionsVisible">
|
|
|
|
|
<div class="flex" v-for="item in optionsData" @click="handleflyto(item)">
|
|
|
|
|
<div class="label">{{ item.formatted_address }}</div>
|
|
|
|
|
<div class="mr-1">{{ item.city }}</div>
|
|
|
|
|
<div>{{ item.district }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -43,30 +55,36 @@
|
|
|
|
|
|
|
|
|
|
const mapContainerName = ref<String>();
|
|
|
|
|
mapContainerName.value = 'mapContainer-' + generateUUID();
|
|
|
|
|
const props = defineProps(['geoms','location']);
|
|
|
|
|
const props = defineProps(['geoms','location','isPoint']);
|
|
|
|
|
const emit = defineEmits(['handlerDrawComplete'])
|
|
|
|
|
|
|
|
|
|
const address = ref()
|
|
|
|
|
const optionsData = ref([])
|
|
|
|
|
const optionsVisible = ref(false)
|
|
|
|
|
const searchAddress = ()=>{
|
|
|
|
|
axios({
|
|
|
|
|
method: 'get',
|
|
|
|
|
url: `https://restapi.amap.com/v3/geocode/geo?key=ed310f0b1f6cfd93edfba42f1a09d4d9&address=`+address.value,
|
|
|
|
|
url: `https://restapi.amap.com/v3/geocode/geo?key=ed310f0b1f6cfd93edfba42f1a09d4d9&&city=临沂&address=`+address.value,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if(res.data){
|
|
|
|
|
let location = res.data.geocodes[0].location.split(',')
|
|
|
|
|
map.flyTo({
|
|
|
|
|
center: location,
|
|
|
|
|
zoom: 13,
|
|
|
|
|
bearing: 0,
|
|
|
|
|
speed: 1, // 飞行速度
|
|
|
|
|
curve: 2, // 飞行曲线
|
|
|
|
|
essential: true,
|
|
|
|
|
easing(t) {
|
|
|
|
|
// 飞行动画函数
|
|
|
|
|
return t;
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
console.log('aaa111', res.data)
|
|
|
|
|
optionsData.value = res.data.geocodes
|
|
|
|
|
optionsVisible.value = true
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
const handleflyto = (e) =>{
|
|
|
|
|
optionsVisible.value = false
|
|
|
|
|
let location = e.location.split(',')
|
|
|
|
|
map.flyTo({
|
|
|
|
|
center: location,
|
|
|
|
|
zoom: 13,
|
|
|
|
|
bearing: 0,
|
|
|
|
|
speed: 1, // 飞行速度
|
|
|
|
|
curve: 2, // 飞行曲线
|
|
|
|
|
essential: true,
|
|
|
|
|
easing(t) {
|
|
|
|
|
// 飞行动画函数
|
|
|
|
|
return t;
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 定义地图容器
|
|
|
|
|
@ -149,8 +167,8 @@
|
|
|
|
|
drawTool = new MapboxDraw({
|
|
|
|
|
displayControlsDefault: false,
|
|
|
|
|
controls: {
|
|
|
|
|
point: true,
|
|
|
|
|
polygon: true, // 仅显示“绘制多边形”按钮
|
|
|
|
|
point: props.isPoint? true: false,
|
|
|
|
|
polygon: props.isPoint? false: true, // 仅显示“绘制多边形”按钮
|
|
|
|
|
trash: true // 仅显示“删除”按钮
|
|
|
|
|
},
|
|
|
|
|
modes: {
|
|
|
|
|
@ -635,6 +653,29 @@
|
|
|
|
|
left: 20px;
|
|
|
|
|
top: 10px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
.addressbox{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 200px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 0 0 3px 3px;
|
|
|
|
|
.flex{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
.label{
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
max-width: 170px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.mr-1{
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
userName
7 months ago