<template>
|
<el-dialog
|
:visible.sync="mapLocationVisible"
|
append-to-body
|
:close-on-click-modal="false"
|
width="75%"
|
>
|
<div class="mapLocation_head">
|
<div>
|
<el-alert
|
title="请拖动红色标记"
|
type="info"
|
:closable="false"
|
class="mapLocation_alert"
|
>
|
</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">
|
<div id="map" class="mapLocation_map"></div>
|
</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>
|
export default {
|
name: "mapLocation",
|
data(){
|
return{
|
title:'',
|
longitude:'',
|
latitude:'',
|
mapLocationVisible:false,
|
}
|
},
|
mounted() {
|
},
|
methods:{
|
openMapLocation(longitude,latitude){
|
this.longitude = ""
|
this.latitude = ""
|
if(longitude === "" || longitude === null){
|
this.title = '新增'
|
}else{
|
this.title = '修改'
|
this.longitude = longitude
|
this.latitude = latitude
|
}
|
this.mapLocationVisible = true
|
setTimeout( ()=> {
|
this.loadMap()
|
},)
|
},
|
loadMap(){
|
var map = new BMapGL.Map('map');
|
if(this.title === '新增'){
|
map.centerAndZoom(new BMapGL.Point(87, 43), 12);
|
}else{
|
map.centerAndZoom(new BMapGL.Point(parseInt(this.longitude), parseInt(this.latitude)), 12);
|
}
|
map.addControl(new BMapGL.MapTypeControl({
|
mapTypes:[BMAP_HYBRID_MAP]
|
}))
|
map.enableScrollWheelZoom(true)
|
var scaleCtrl = new BMapGL.ScaleControl()
|
map.addControl(scaleCtrl)
|
var zoomCtrl = new BMapGL.ZoomControl()
|
map.addControl(zoomCtrl)
|
var marker = new BMapGL.Marker(new BMapGL.Point(parseInt(this.longitude), parseInt(this.latitude)),{
|
enableDragging: true
|
});
|
map.addOverlay(marker)
|
map.addEventListener('click', function(e){
|
map.clearOverlays()
|
document.getElementById("lng").value = e.latlng.lng
|
document.getElementById("lat").value = e.latlng.lat
|
map.addOverlay(new BMapGL.Marker(new BMapGL.Point(document.getElementById("lng").value,document.getElementById("lat").value)))
|
});
|
|
},
|
submitLatLng(){
|
this.$emit('giveLatLng',{lat:document.getElementById("lat").value,lng:document.getElementById("lng").value})
|
this.mapLocationVisible = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.BMap_cpyCtrl {
|
display: none;
|
}
|
.anchorBL {
|
display: none;
|
}
|
/deep/ .el-dialog__header {
|
padding: 10px 10px 10px;
|
}
|
.mapLocation_head{
|
width:100%;
|
height:100px;
|
}
|
.mapLocation_body{
|
width:100%;
|
height:500px
|
}
|
.mapLocation_latlng{
|
padding-top:10px;
|
display:inline-block;
|
}
|
.mapLocation_latlng_input{
|
width:150px;
|
}
|
.mapLocation_alert{
|
font-weight: bold;
|
color:black;
|
}
|
.mapLocation_map{
|
margin-left:10px;
|
width:100%;
|
height:500px;
|
}
|
</style>
|
