|
@@ -2,6 +2,17 @@
|
|
|
.mapContent {
|
|
|
position: relative;
|
|
|
margin-top: 80px;
|
|
|
+ .center-add{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ z-index: 999;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
#mapContainer {
|
|
|
width: 100%;
|
|
@@ -49,6 +60,11 @@
|
|
|
|
|
|
<template>
|
|
|
<div class="mapContent">
|
|
|
+ <img
|
|
|
+ class='center-add'
|
|
|
+ src="../../../public/img/zuobiao.gif"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div id="mapContainer"></div>
|
|
|
<div id="tip" v-show="showFlag === false ? false : true">
|
|
|
<el-select v-model="province" @change="selectP" placeholder="省">
|
|
@@ -78,7 +94,7 @@
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
-
|
|
|
+ <el-button>经纬度:{{center}}</el-button>
|
|
|
<el-button @click="positions" type="primary" v-if='!isShowaddress'>确定定位</el-button>
|
|
|
<el-button @click="anewselect" v-if='!isShowaddress'>重新选择</el-button>
|
|
|
<el-button @click="submit" v-if='isShowaddress'>确定</el-button>
|
|
@@ -119,6 +135,7 @@ export default {
|
|
|
zoomEnable: true,
|
|
|
dragEnable: true,
|
|
|
status: true,
|
|
|
+ center:'',
|
|
|
}
|
|
|
},
|
|
|
props: ['flagVisible', 'position','selectedOptions','isShowaddress','type'],
|
|
@@ -174,10 +191,10 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
this.marker = new AMap.Marker({
|
|
|
- icon: new AMap.Icon({
|
|
|
- size: new AMap.Size(36, 44),
|
|
|
- image: image,
|
|
|
- }),
|
|
|
+ // icon: new AMap.Icon({
|
|
|
+ // size: new AMap.Size(36, 44),
|
|
|
+ // image: image,
|
|
|
+ // }),
|
|
|
map: that.map,
|
|
|
})
|
|
|
AMap.plugin(
|
|
@@ -219,13 +236,18 @@ export default {
|
|
|
var geocoder = new AMap.Geocoder({
|
|
|
radius: 1000,
|
|
|
})
|
|
|
- that.map.on('click', function (e) {
|
|
|
- for (var i = 0, l = that.polygons.length; i < l; i++) {
|
|
|
+ that.map.on('moveend', function(e){debugger
|
|
|
+ that.center = that.map.getCenter(); //获取当前地图中心位置
|
|
|
+ that.center.lat =Number(that.center.lat.toFixed(3))
|
|
|
+ that.center.lng =Number(that.center.lng.toFixed(3))
|
|
|
+ that.center.Q =Number(that.center.Q.toFixed(3))
|
|
|
+ that.center.R =Number(that.center.R.toFixed(3))
|
|
|
+ for (var i = 0, l = that.polygons.length; i < l; i++) {
|
|
|
that.polygons[i].setMap(null)
|
|
|
}
|
|
|
that.marker.setMap(that.map)
|
|
|
- that.marker.setPosition(e.lnglat)
|
|
|
- geocoder.getAddress(e.lnglat, function (status, result) {
|
|
|
+ that.marker.setPosition(that.center)
|
|
|
+ geocoder.getAddress(that.center, function (status, result) {
|
|
|
if (status === 'complete') {
|
|
|
var obj = {}
|
|
|
that.province = result.regeocode.addressComponent.province
|
|
@@ -234,14 +256,66 @@ export default {
|
|
|
obj.formattedAddress = result.regeocode.formattedAddress
|
|
|
obj.areacode = result.regeocode.addressComponent.adcode
|
|
|
that.address = result.regeocode.formattedAddress
|
|
|
- obj.lat = e.lnglat.lat
|
|
|
- obj.lng = e.lnglat.lng
|
|
|
+ obj.lat = that.center.lat
|
|
|
+ obj.lng = that.center.lng
|
|
|
that.$emit('pickedAddress', obj)
|
|
|
} else {
|
|
|
that.$emit('pickedAddress', '')
|
|
|
}
|
|
|
})
|
|
|
- })
|
|
|
+ });
|
|
|
+ that.map.on('zoomend', function(){
|
|
|
+ // this.zoom = map.getZoom(); //获取当前地图级别
|
|
|
+ that.center = that.map.getCenter(); //获取当前地图中心位置
|
|
|
+ that.center.lat =Number(that.center.lat.toFixed(3))
|
|
|
+ that.center.lng =Number(that.center.lng.toFixed(3))
|
|
|
+ that.center.Q =Number(that.center.Q.toFixed(3))
|
|
|
+ that.center.R =Number(that.center.R.toFixed(3))
|
|
|
+ for (var i = 0, l = that.polygons.length; i < l; i++) {
|
|
|
+ that.polygons[i].setMap(null)
|
|
|
+ }
|
|
|
+ that.marker.setMap(that.map)
|
|
|
+ that.marker.setPosition(that.center)
|
|
|
+ geocoder.getAddress(that.center, function (status, result) {
|
|
|
+ if (status === 'complete') {
|
|
|
+ var obj = {}
|
|
|
+ that.province = result.regeocode.addressComponent.province
|
|
|
+ that.city = result.regeocode.addressComponent.city
|
|
|
+ that.district = result.regeocode.addressComponent.district
|
|
|
+ obj.formattedAddress = result.regeocode.formattedAddress
|
|
|
+ obj.areacode = result.regeocode.addressComponent.adcode
|
|
|
+ that.address = result.regeocode.formattedAddress
|
|
|
+ obj.lat = that.center.lat
|
|
|
+ obj.lng = that.center.lng
|
|
|
+ that.$emit('pickedAddress', obj)
|
|
|
+ } else {
|
|
|
+ that.$emit('pickedAddress', '')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ // that.map.on('click', function (e) {
|
|
|
+ // for (var i = 0, l = that.polygons.length; i < l; i++) {
|
|
|
+ // that.polygons[i].setMap(null)
|
|
|
+ // }
|
|
|
+ // that.marker.setMap(that.map)
|
|
|
+ // that.marker.setPosition(e.lnglat)
|
|
|
+ // geocoder.getAddress(e.lnglat, function (status, result) {
|
|
|
+ // if (status === 'complete') {
|
|
|
+ // var obj = {}
|
|
|
+ // that.province = result.regeocode.addressComponent.province
|
|
|
+ // that.city = result.regeocode.addressComponent.city
|
|
|
+ // that.district = result.regeocode.addressComponent.district
|
|
|
+ // obj.formattedAddress = result.regeocode.formattedAddress
|
|
|
+ // obj.areacode = result.regeocode.addressComponent.adcode
|
|
|
+ // that.address = result.regeocode.formattedAddress
|
|
|
+ // obj.lat = e.lnglat.lat
|
|
|
+ // obj.lng = e.lnglat.lng
|
|
|
+ // that.$emit('pickedAddress', obj)
|
|
|
+ // } else {
|
|
|
+ // that.$emit('pickedAddress', '')
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
// 根据坐标点定位,获取地址的详细信息
|
|
|
if (that.position) {
|
|
|
that.marker.setMap(that.map)
|
|
@@ -268,7 +342,7 @@ export default {
|
|
|
this.loadmap()
|
|
|
},
|
|
|
methods: {
|
|
|
- positions() {
|
|
|
+ positions() {debugger
|
|
|
this.status = false
|
|
|
var status = {
|
|
|
zoomEnable: false,
|