html
<el-tag v-if='isSave' size="small" style="cursor:pointer;margin-left:20px;" @click="open()">点击选取</el-tag>
<el-dialog
class="dialog companygoodsLog"
v-model="visible"
:close-on-click-modal="false"
:draggable="true"
:show-close="false"
title="位置选择"
destroy-on-close
style="border-radius: 4px;background-color: #ffffff"
top="100px"
width="80%">
<div style="height:40px;width:100%;display: flex;align-items: center;">
<el-select
v-model="areaValue"
filterable
style='width:350px'
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
@change="currentSelect"
>
<el-option
v-for="item in areaList"
:key="item.id"
:label="item.name"
:value="item"
class="one-text"
>
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{item.district}}{{item.address}}</span>
</el-option>
</el-select>
</div>
<div id="container" style="height:500px;width:100%;margin-top:10px;"></div>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false"><span style="color: #5E5E5E">关闭</span></el-button>
<el-button color="#68964C" @click="confirmData">
确定
</el-button>
</span>
</template>
</el-dialog>
ts:
<script setup lang="ts">
import { reactive,ref,onMounted, onUnmounted,watch } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
const dialogMap = ref(false)
const mapContainer = ref(null);
const visible:any = ref(false)
const areaList:any =ref([])
const areaValue = ref('')
let map:any = null
const loading:any = ref(false)
const checkedForm:any = ref()
let AutoComplete:any = null
let aMap:any = null
let geoCoder:any = null
const initMap = () => {
AMapLoader.load({
key: "高德key",
version: "2.0",
plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
}).then((AMap:any) => {
aMap = AMap
map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [116.397428, 39.90923], // 初始化地图中心点位置
});
AutoComplete = new AMap.AutoComplete({
city:'全国',
});
geoCoder = new AMap.Geocoder({
city: "010", //城市设为北京,默认:“全国”
radius: 1000, //范围,默认:500
});
map.on('click',(e:any)=>{
addmark(e.lnglat.getLng(),e.lnglat.getLat(),AMap)
})
})
.catch((e) => {
console.log(e);
});
}
let marker:any = null
const addmark = (lat:any,lng:any,AMap:any) => {
marker && removeMarker()
marker = new AMap.Marker({
position: new AMap.LngLat(lat, lng),
title: '北京',
zoom: 13
});
checkedForm.value = {
lat:lng,
lng:lat,
}
map.add(marker);
map.setCenter([lat, lng],'',500);
}
const removeMarker = () => {
map.remove(marker)
}
const remoteMethod = (searchValue:any) => {
if (searchValue !== "") {
setTimeout(() => {
AutoComplete.search(searchValue, (status:any, result:any) => {
console.log(result,status)
if(result.tips?.length){
areaList.value = result?.tips
}
});
}, 200);
} else {
}
}
const currentSelect = (val:any) => {
checkedForm.value = {
lat:val.location?.lat,
lng:val.location?.lng,
}
console.log(val)
areaValue.value = val.name
addmark(val.location?.lng,val.location?.lat,aMap)
map.setCenter([val.location?.lng,val.location?.lat],'',500);
}
const confirmData = () => {
if(!checkedForm.value?.lat || !checkedForm.value?.lng){
return ElMessage.error('请选择地址')
}else{
console.log(checkedForm.value)
visible.value = false
areaValue.value = ''
map?.destroy();
list.longitude = checkedForm.value.lng
list.latitude = checkedForm.value.lat
}
}
const open = () => {
initMap()
visible.value = true
}
defineExpose({
open
})
onUnmounted(() => {
map?.destroy();
});
</script>
根据经纬度展示地图标点
<el-button v-if="list.longitude" type="primary" style="margin-bottom: 20px;"@click="showMapDialog()">点击查看位置</el-button>
<el-dialog v-model="dialogMap" title="位置信息" width="900px">
<div ref="mapContainer" id="container" style="height:500px;width:100%;margin-top:10px;"></div>
</el-dialog>
<script setup>
import { reactive, ref, onMounted, toRefs, watch } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
const dialogVisible = ref(false)
const dialogMap = ref(false)
const mapContainer = ref(null);
const props = defineProps({
isShow15: {
type: Boolean,
default: false,
},
list:{
default:{}
}
});
const emits = defineEmits(['close15'])
const closeDialog = () => {
emits('close15', false)
}
const mapList = ref([])
watch(() => props.isShow15, (val) => {
// console.log(val)
dialogVisible.value = val
}, { immediate: true })
watch(() => props.list, (val) => {
mapList.value = val
}, { immediate: true })
const showMapDialog = async () => {
dialogMap.value = true;
initMap();
};
let map = null
let aMap = null
let AutoComplete = null
let geoCoder = null
let marker = null;
const initMap = () => {
AMapLoader.load({
key: "高德地图key",
version: "2.0",
plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
}).then((AMap) => {
aMap = AMap
map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "2D", // 是否为3D地图模式
zoom: 21, // 初始化地图级别
center: [parseFloat(mapList.value.longitude), parseFloat(mapList.value.latitude)], // 初始化地图中心点位置
});
AutoComplete = new AMap.AutoComplete({
city:'全国',
});
geoCoder = new AMap.Geocoder({
city: "010", //城市设为北京,默认:“全国”
radius: 1000, //范围,默认:500
});
geoCoder = new AMap.Geocoder({
city: "全国", //城市设为北京,默认:“全国”
radius: 1000, //范围,默认:500
})
marker = new aMap.Marker({
position: [parseFloat(mapList.value.longitude), parseFloat(mapList.value.latitude)],
map: map,
});
})
.catch((e) => {
console.log(e);
});
}
</script>