vue3 高德地图关键词搜索获取经纬度的示例代码
作者：kurcp
这篇文章主要介绍了vue3 高德地图关键词搜索获取经纬度的示例代码,需要的朋友可以参考下
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>到此这篇关于vue3 高德地图关键词搜索获取经纬度的文章就介绍到这了,更多相关vue3 高德地图获取经纬度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！