137 lines
4.7 KiB
Vue
137 lines
4.7 KiB
Vue
<template>
|
||
<div class="map">
|
||
<input type="text" placeholder="请输入地址" v-model="searchValue" />
|
||
<button @click="onSearch">搜索</button>
|
||
<div id="container" :style="{ 'height': mapProps.height }"></div>
|
||
|
||
<div id="my-panel" @listElementClick="selectPostion"></div>
|
||
<div class="flex justify-end">
|
||
<el-button type="primary" @click="submit"> 确定 </el-button>
|
||
<el-button @click="emit('setLocation')">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { onMounted, onUnmounted } from 'vue';
|
||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||
const { proxy } = getCurrentInstance();
|
||
//props参数
|
||
const mapProps = defineProps({
|
||
height: {
|
||
type: String,
|
||
default: '800px'
|
||
}
|
||
});
|
||
const emit = defineEmits(['setLocation']);
|
||
const center = ref([116.397428, 39.90923]);
|
||
const map = ref(null);
|
||
const placeSearch = ref(null);
|
||
const geocoder = ref(null);
|
||
const searchValue = ref('');
|
||
const lnglat = ref([]);
|
||
onMounted(() => {
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: '3f418182f27c907265f69a708c5fa41c'
|
||
};
|
||
AMapLoader.load({
|
||
key: 'ed8d05ca57affee582e2be654bac5baf', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
plugins: ['AMap.Scale', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
|
||
})
|
||
.then((AMap) => {
|
||
map.value = new AMap.Map('container', {
|
||
// 设置地图容器id
|
||
viewMode: '3D', // 是否为3D地图模式
|
||
zoom: 8, // 初始化地图级别
|
||
center: center.value // 初始化地图中心点位置
|
||
});
|
||
//初始化搜索
|
||
placeSearch.value = new AMap.PlaceSearch({
|
||
pageSize: 5, //单页显示结果条数
|
||
// pageIndex: 1, //页码
|
||
// city: '010', //兴趣点城市
|
||
// citylimit: true, //是否强制限制在设置的城市内搜索
|
||
panel: 'my-panel',
|
||
map: map.value, //展现结果的地图实例
|
||
autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
|
||
});
|
||
// 初始化Geocoder
|
||
geocoder.value = new AMap.Geocoder({
|
||
radius: 1000 //范围，默认：500
|
||
});
|
||
|
||
// 定位
|
||
const geolocation = new AMap.Geolocation({
|
||
enableHighAccuracy: true, //是否使用高精度定位，默认:true
|
||
timeout: 10000, //超过10秒后停止定位，默认：无穷大
|
||
maximumAge: 0, //定位结果缓存0毫秒，默认：0
|
||
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
|
||
showButton: true, //显示定位按钮，默认：true
|
||
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
|
||
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
||
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
|
||
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
|
||
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
|
||
zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
|
||
});
|
||
map.value.addControl(geolocation);
|
||
|
||
//定位到当前位置
|
||
geolocation.getCurrentPosition((status, result) => {
|
||
console.log(status, result);
|
||
});
|
||
placeSearch.value.on('selectChanged', (e) => {
|
||
let { lng, lat } = e.selected.data.location;
|
||
lnglat.value = [lng, lat];
|
||
});
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
});
|
||
const onSearch = () => {
|
||
//搜索地址
|
||
placeSearch.value.search(searchValue.value, (status, result) => {
|
||
if (result.info !== 'OK') return;
|
||
let { lng, lat } = result.poiList.pois[0].location;
|
||
lnglat.value = [lng, lat];
|
||
});
|
||
};
|
||
|
||
const submit = () => {
|
||
if (!lnglat.value.length) {
|
||
proxy?.$modal.msgWarning('请选择正确地址');
|
||
return;
|
||
}
|
||
geocoder.value.getAddress(lnglat.value, function (status, result) {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
// result为对应的地理位置详细信息
|
||
const position = {
|
||
lng: lnglat.value[0],
|
||
lat: lnglat.value[1],
|
||
projectSite: result.regeocode.formattedAddress
|
||
};
|
||
emit('setLocation', position);
|
||
}
|
||
});
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
map.value?.destroy();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
#container {
|
||
width: 100%;
|
||
position: relative;
|
||
margin-bottom: 15px;
|
||
}
|
||
#my-panel {
|
||
position: absolute;
|
||
top: 103px;
|
||
z-index: 1;
|
||
left: 10px;
|
||
}
|
||
</style>
|