<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="state.longitude"></el-input>
|
</div>
|
<div class="mapLocation_latlng">
|
<span>纬度：</span>
|
<el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude"></el-input>
|
</div>
|
</div>
|
<div class="mapLocation_body">
|
<baidu-map class="map" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="state.center" :zoom="15" scroll-wheel-zoom @ready="initMap" @click="getPosition">
|
<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} from 'vue';
|
import { BaiduMap,BmMarker } from 'vue-baidu-map-3x'
|
const state = reactive({
|
title: '',
|
longitude: '',
|
latitude: '',
|
mapLocationVisible: false,
|
center: {
|
lng: '116.404',
|
lat: '39.915'
|
}
|
})
|
|
const emit = defineEmits(['giveLatLng'])
|
|
onMounted(() => {
|
// ...（mounted钩子中的代码不变）
|
});
|
const map = reactive({})
|
|
const getPosition = ({type, target, point, pixel, overlay})=>{
|
state.longitude = point.lng
|
state.latitude = point.lat
|
}
|
|
const openMapLocation=(longitude,latitude)=>{
|
state.longitude = longitude
|
state.latitude = latitude
|
state.mapLocationVisible = true
|
}
|
|
const submitLatLng=()=>{
|
state.mapLocationVisible = false
|
emit('giveLatLng',state.longitude,state.latitude);
|
}
|
|
const initMap=()=>{
|
|
}
|
|
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>
|
