|
|
@@ -1,6 +1,8 @@
|
|
|
<style lang='scss' scoped>
|
|
|
.mapContent {
|
|
|
position: relative;
|
|
|
+ height: 95%;
|
|
|
+ transition:.5s;
|
|
|
.center-add {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -16,103 +18,14 @@
|
|
|
|
|
|
#mapContainer {
|
|
|
width: 100%;
|
|
|
- height: 330px;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
-
|
|
|
- // #tip {
|
|
|
- // position: absolute;
|
|
|
- // top: -45px;
|
|
|
- // display: flex;
|
|
|
- // }
|
|
|
-
|
|
|
- // #tip .el-input {
|
|
|
- // // width: 179px;
|
|
|
- // margin-right: 0px;
|
|
|
- // }
|
|
|
-
|
|
|
- // #tip .el-select {
|
|
|
- // margin-right: 10px;
|
|
|
- // }
|
|
|
-
|
|
|
- // #tip .el-select {
|
|
|
- // width: 179px;
|
|
|
- // }
|
|
|
-
|
|
|
- // #tip .el-textarea {
|
|
|
- // width: 179px;
|
|
|
-
|
|
|
- // /deep/ .el-textarea__inner {
|
|
|
- // height: 40px;
|
|
|
- // resize: none;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // .el-button--primary {
|
|
|
- // background-color: #5878e8;
|
|
|
- // border-color: #5878e8;
|
|
|
- // }
|
|
|
-
|
|
|
- // .el-button--default {
|
|
|
- // color: #5878e8;
|
|
|
- // border-color: #5473e8;
|
|
|
- // }
|
|
|
-
|
|
|
- // .address {
|
|
|
- // display: flex;
|
|
|
- // align-items: center;
|
|
|
- // margin-right: 20px;
|
|
|
-
|
|
|
- // // position:absolute;
|
|
|
- // // top: -35px;
|
|
|
- // .address-input {
|
|
|
- // display: inline-block;
|
|
|
- // width: 480px;
|
|
|
- // }
|
|
|
- // }
|
|
|
</style>
|
|
|
|
|
|
<template>
|
|
|
<div class="mapContent">
|
|
|
+ <div class="fixed">{{clickData}}</div>
|
|
|
<div id="mapContainer"></div>
|
|
|
- <!-- <div id="tip" v-show="showFlag === false ? false : true">
|
|
|
- <el-select v-model="province" @change="selectP" placeholder="省">
|
|
|
- <el-option
|
|
|
- v-for="item in provinces"
|
|
|
- :key="item.adcode"
|
|
|
- :label="item.name"
|
|
|
- :value="item.adcode"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-select v-model="city" @change="selectC" placeholder="市">
|
|
|
- <el-option
|
|
|
- v-for="item in citys"
|
|
|
- :key="item.adcode"
|
|
|
- :label="item.name"
|
|
|
- :value="item.name"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-select v-model="district" @change="selectD" placeholder="区">
|
|
|
- <el-option
|
|
|
- v-for="item in districts"
|
|
|
- :key="item.adcode"
|
|
|
- :label="item.name"
|
|
|
- :value="item.adcode"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <div class="address">
|
|
|
- <el-input type="text" id="searchValue" placeholder="请输入关键字:" v-model="address" clearable class="address-input">
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <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>
|
|
|
- </div> -->
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -126,6 +39,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ clickData:{},
|
|
|
map: null,
|
|
|
provinces: [],
|
|
|
province: '',
|
|
|
@@ -186,164 +100,111 @@
|
|
|
dragEnable: this.dragEnable,
|
|
|
})
|
|
|
this.map.on('click', function(e) {
|
|
|
- if (this.status) {
|
|
|
- var marker = new AMap.Marker({
|
|
|
- position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat
|
|
|
- .getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- })
|
|
|
- that.map.remove(that.markers)
|
|
|
- that.$emit('marker', e)
|
|
|
- that.markers.push(marker)
|
|
|
- // 将创建的点标记添加到已有的地图实例：
|
|
|
- that.map.add(marker)
|
|
|
- }
|
|
|
+ // if (this.status) {
|
|
|
+ // var marker = new AMap.Marker({
|
|
|
+ // position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ // })
|
|
|
+ // that.map.remove(that.markers)
|
|
|
+ // that.$emit('marker', e)
|
|
|
+ // that.markers.push(marker)
|
|
|
+ // // 将创建的点标记添加到已有的地图实例：
|
|
|
+ // that.map.add(marker)
|
|
|
+ // }
|
|
|
})
|
|
|
this.marker = new AMap.Marker({
|
|
|
icon: new AMap.Icon({
|
|
|
- size: new AMap.Size(0, 0),
|
|
|
- image: image,
|
|
|
+ size: new AMap.Size(20, 20),
|
|
|
+ image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.pngimage',
|
|
|
}),
|
|
|
- map: that.map,
|
|
|
+ // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
|
|
|
+ position: [122.31016,40.670552]
|
|
|
})
|
|
|
AMap.plugin(
|
|
|
['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch'],
|
|
|
function() {
|
|
|
- var autocomplete = new AMap.Autocomplete({
|
|
|
- input: 'searchValue',
|
|
|
- })
|
|
|
- var placeSearch = new AMap.PlaceSearch({
|
|
|
- city: that.acode,
|
|
|
- citylimit: true,
|
|
|
- pageSize: 1,
|
|
|
- pageIndex: 1,
|
|
|
- map: that.map,
|
|
|
- })
|
|
|
- var districtSearch = new AMap.DistrictSearch({
|
|
|
- subdistrict: 1,
|
|
|
- level: 'city',
|
|
|
- showbiz: false,
|
|
|
- });
|
|
|
+ // var autocomplete = new AMap.Autocomplete({
|
|
|
+ // input: 'searchValue',
|
|
|
+ // })
|
|
|
+ // var placeSearch = new AMap.PlaceSearch({
|
|
|
+ // city: that.acode,
|
|
|
+ // citylimit: true,
|
|
|
+ // pageSize: 1,
|
|
|
+ // pageIndex: 1,
|
|
|
+ // map: that.map,
|
|
|
+ // })
|
|
|
+ // var districtSearch = new AMap.DistrictSearch({
|
|
|
+ // subdistrict: 1,
|
|
|
+ // level: 'city',
|
|
|
+ // showbiz: false,
|
|
|
+ // });
|
|
|
|
|
|
- AMap.event.addListener(autocomplete, 'select', function(e) {
|
|
|
- that.marker.setMap(that.map)
|
|
|
- if (e.poi.location) {
|
|
|
- placeSearch.search() // 关键字查询查询
|
|
|
- that.marker.setPosition(e.poi.location)
|
|
|
- geocoder.getAddress(e.poi.location, function(status, result) {
|
|
|
- console.log(e.poi.location, "klokolkjolk")
|
|
|
- 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.poi.location.lat
|
|
|
- obj.lng = e.poi.location.lng
|
|
|
- that.$emit('searchAddress', obj)
|
|
|
- } else {
|
|
|
- that.$emit('searchAddress', '')
|
|
|
- }
|
|
|
- that.map.setFitView()
|
|
|
- })
|
|
|
- } else {
|
|
|
- districtSearch.search(e.poi.name, (status, result1) => {
|
|
|
- if (status == 'complete') {
|
|
|
- that.marker.setPosition(result1.districtList[0].center)
|
|
|
- geocoder.getAddress(result1.districtList[0].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 = result1.districtList[0].center.lat
|
|
|
- obj.lng = result1.districtList[0].center.lng
|
|
|
- that.$emit('searchAddress', obj)
|
|
|
- } else {
|
|
|
- that.$emit('searchAddress', '')
|
|
|
- }
|
|
|
- that.map.setFitView()
|
|
|
- })
|
|
|
+ // AMap.event.addListener(autocomplete, 'select', function(e) {
|
|
|
+ // that.marker.setMap(that.map)
|
|
|
+ // if (e.poi.location) {
|
|
|
+ // placeSearch.search() // 关键字查询查询
|
|
|
+ // that.marker.setPosition(e.poi.location)
|
|
|
+ // geocoder.getAddress(e.poi.location, function(status, result) {
|
|
|
+ // console.log(e.poi.location, "klokolkjolk")
|
|
|
+ // 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.poi.location.lat
|
|
|
+ // obj.lng = e.poi.location.lng
|
|
|
+ // that.$emit('searchAddress', obj)
|
|
|
+ // } else {
|
|
|
+ // that.$emit('searchAddress', '')
|
|
|
+ // }
|
|
|
+ // that.map.setFitView()
|
|
|
+ // })
|
|
|
+ // } else {
|
|
|
+ // districtSearch.search(e.poi.name, (status, result1) => {
|
|
|
+ // if (status == 'complete') {
|
|
|
+ // that.marker.setPosition(result1.districtList[0].center)
|
|
|
+ // geocoder.getAddress(result1.districtList[0].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 = result1.districtList[0].center.lat
|
|
|
+ // obj.lng = result1.districtList[0].center.lng
|
|
|
+ // that.$emit('searchAddress', obj)
|
|
|
+ // } else {
|
|
|
+ // that.$emit('searchAddress', '')
|
|
|
+ // }
|
|
|
+ // that.map.setFitView()
|
|
|
+ // })
|
|
|
|
|
|
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
// 经纬度
|
|
|
var geocoder = new AMap.Geocoder({
|
|
|
radius: 1000,
|
|
|
})
|
|
|
- that.map.on('moveend', function(e) {
|
|
|
- //地图变动之后需要重新赋值省市区，未完成
|
|
|
- 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('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) {
|
|
|
+ // that.map.on('moveend', function(e) {
|
|
|
+ // //地图变动之后需要重新赋值省市区，未完成
|
|
|
+ // 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
|
|
|
@@ -352,14 +213,69 @@
|
|
|
// 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) {debugger
|
|
|
+ // 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') {
|
|
|
+ that.clickData = result
|
|
|
+ console.log(e.lnglat)
|
|
|
+ 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)
|
