<template>
|
<el-dialog
|
v-model="state.mapLocationVisible"
|
v-if="state.mapLocationVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
width="75%"
|
:title="state.title"
|
@close="handleClose"
|
>
|
<div class="mapLocation_head">
|
<div>
|
<el-alert
|
title="点击地点获取经纬度信息"
|
type="info"
|
:closable="false"
|
>
|
</el-alert>
|
</div>
|
<div class="mapLocation_latlng">
|
<span>经度：</span>
|
<el-input class="mapLocation_latlng_input" id="lng" v-model.trim="state.longitude" @change="getAdress"></el-input>
|
</div>
|
<div class="mapLocation_latlng">
|
<span>纬度：</span>
|
<el-input class="mapLocation_latlng_input" id="lat" v-model.trim="state.latitude" @change="getAdress"></el-input>
|
</div>
|
<div class="mapLocation_latlng">
|
<span>地址：</span>
|
<el-input class="mapLocation_latlng_input" id="lat" v-model.trim="state.BAddress"></el-input>
|
</div>
|
|
</div>
|
<div class="mapLocation_body">
|
<baidu-map class="map" @ready="getAdress" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="state.center" :zoom="state.zoom" scroll-wheel-zoom @click="getPosition">
|
<!-- <div style="position: absolute;z-index: 999;margin-top: -495px">-->
|
<!-- <label>搜索：<input v-model="state.keyword"></label>-->
|
<!-- <bm-local-search-->
|
<!-- :keyword="state.keyword"-->
|
<!-- :auto-viewport="true"-->
|
<!-- location="新疆"-->
|
<!-- :pageCapacity="3"-->
|
<!-- ></bm-local-search>-->
|
<!-- </div>-->
|
<bm-marker :position="{lng: state.longitude, lat: state.latitude}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
|
<!-- <bm-label :labelStyle="{color: 'red'}" :offset="{width: -35, height: 30}"/>-->
|
</bm-marker>
|
</baidu-map>
|
</div>
|
<div align="right" style="margin-top: 10px">
|
<el-button @click="handleClose()">取消</el-button>
|
<el-button type="primary" @click="submitLatLng()">确认</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import {ref, onMounted, reactive, toRefs, defineComponent, defineExpose, defineEmits, watch} from 'vue';
|
import { BaiduMap,BmMarker,BmLocalSearch,BmLabel } from 'vue-baidu-map-3x'
|
const state = reactive({
|
title: '',
|
longitude: '',
|
latitude: '',
|
mapLocationVisible: false,
|
zoom: 7,
|
center: {
|
lng: '120.622500',
|
lat: '31.305800'
|
},
|
keyword:'',
|
location: '',
|
BAddress: ''
|
})
|
|
const emit = defineEmits(['giveLatLng'])
|
|
onMounted(() => {
|
// ...（mounted钩子中的代码不变）
|
});
|
const map = reactive({})
|
|
const getPosition = ({type, target, point, pixel, overlay})=>{
|
state.longitude = point.lng
|
state.latitude = point.lat
|
getAdress()
|
}
|
|
const openMapLocation=(longitude,latitude)=>{
|
|
if(longitude){
|
state.longitude = longitude
|
state.latitude = latitude
|
state.zoom = 10
|
state.center = {
|
lng: longitude,
|
lat: latitude
|
}
|
}else {
|
state.zoom = 10
|
state.center = {
|
lng: '120.622500',
|
lat: '31.305800'
|
}
|
}
|
|
state.mapLocationVisible = true
|
}
|
|
const submitLatLng=()=>{
|
emit('giveLatLng',state.longitude,state.latitude);
|
handleClose()
|
}
|
|
const initMap=()=>{
|
|
}
|
const myGeo = ref(null)
|
const getAdress = () => {
|
myGeo.value = new BMap.Geocoder();
|
const pt = new BMap.Point(state.longitude, state.latitude);
|
myGeo.value.getLocation(pt,function(result){
|
state.BAddress = result.address; //获取到当前定位的详细地址信息
|
},
|
{ enableHighAccuracy: true }
|
);
|
}
|
const handleClose = () => {
|
state.longitude = ''
|
state.latitude = ''
|
state.BAddress = ''
|
state.mapLocationVisible = false
|
}
|
defineExpose({
|
openMapLocation
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.map {
|
width: 100%;
|
height: 500px;
|
|
:deep(.BMap_cpyCtrl){
|
display: none!important;
|
visibility: hidden!important;
|
}
|
|
:deep(.anchorBL) {
|
display: none!important;
|
visibility: hidden!important;
|
}
|
}
|
.mapLocation_head{
|
width:100%;
|
height:100px;
|
}
|
.mapLocation_body{
|
width:100%;
|
height:500px
|
}
|
.mapLocation_latlng{
|
padding-top:10px;
|
display:inline-block;
|
margin-right: 20px;
|
}
|
.mapLocation_latlng_input{
|
width:250px;
|
}
|
</style>
|
