<template>
|
<el-dialog
|
v-model="state.mapLocationVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
width="75%"
|
:title="state.title"
|
>
|
<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 content="选择地点" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
|
</bm-marker>
|
</baidu-map>
|
</div>
|
<div align="right" style="margin-top: 10px">
|
<el-button @click="state.mapLocationVisible = false">取消</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 } from 'vue-baidu-map-3x'
|
const state = reactive({
|
title: '',
|
longitude: '',
|
latitude: '',
|
mapLocationVisible: false,
|
zoom: 7,
|
center: {
|
lng: '116.42585576793277',
|
lat: '39.88973394962104'
|
},
|
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 = 13
|
state.center = {
|
lng: longitude,
|
lat: latitude
|
}
|
}else {
|
|
state.zoom = 7
|
state.center = {
|
lng: '87.61552721758208',
|
lat: '43.839018284106565'
|
}
|
}
|
|
state.mapLocationVisible = true
|
}
|
|
const submitLatLng=()=>{
|
state.mapLocationVisible = false
|
emit('giveLatLng',state.longitude,state.latitude);
|
}
|
|
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 }
|
);
|
}
|
|
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>
|
