<template>
|
<el-dialog
|
v-model="mapLocationVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
width="75%"
|
:title="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="longitude"></el-input>
|
</div>
|
<div class="mapLocation_latlng">
|
<span>纬度：</span>
|
<el-input class="mapLocation_latlng_input" id="lat" v-model="latitude"></el-input>
|
</div>
|
</div>
|
<div class="mapLocation_body">
|
<baidu-map class="map" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="center" :zoom="15" scroll-wheel-zoom @ready="initMap" @click="getPosition">
|
<bm-marker :position="{lng: longitude, lat: 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="mapLocationVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitLatLng()">确认</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import {ref, onMounted, reactive, toRefs, defineComponent} from 'vue';
|
import { BaiduMap,BmMarker } from 'vue-baidu-map-3x'
|
interface DataState{
|
title: string
|
longitude: string
|
latitude: string
|
mapLocationVisible: boolean
|
center: {
|
|
}
|
}
|
export default defineComponent({
|
name: "mapLocation",
|
components: {BaiduMap,BmMarker},
|
setup(props,context) {
|
const state = reactive<DataState>({
|
title: '',
|
longitude: '',
|
latitude: '',
|
mapLocationVisible: false,
|
center: {
|
lng: '116.404',
|
lat: '39.915'
|
}
|
})
|
|
|
|
onMounted(() => {
|
// ...（mounted钩子中的代码不变）
|
});
|
const map = reactive({})
|
|
const getPosition = ({type, target, point, pixel, overlay})=>{
|
state.longitude = point.lng
|
state.latitude = point.lat
|
}
|
|
const openMapLocation=(longitude:string,latitude:string)=>{
|
state.longitude = longitude
|
state.latitude = latitude
|
state.mapLocationVisible = true
|
}
|
|
const submitLatLng=()=>{
|
state.mapLocationVisible = false
|
context.emit('giveLatLng',state.longitude,state.latitude);
|
}
|
|
const initMap=()=>{
|
|
}
|
|
return {
|
map,
|
getPosition,
|
submitLatLng,
|
initMap,
|
openMapLocation,
|
...toRefs(state)
|
};
|
}
|
})
|
</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>
|
