|
|
@@ -0,0 +1,506 @@
|
|
|
+<style lang='scss' scoped>
|
|
|
+ .mapContent {
|
|
|
+ position: relative;
|
|
|
+ .center-add {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ z-index: 999;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #mapContainer {
|
|
|
+ width: 100%;
|
|
|
+ height: 330px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // #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 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>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ regionData,
|
|
|
+ CodeToText,
|
|
|
+ TextToCode
|
|
|
+ } from 'element-china-area-data'
|
|
|
+ import image from '../../../public/img/ic_locationmarker.jpg'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ provinces: [],
|
|
|
+ province: '',
|
|
|
+ districts: [],
|
|
|
+ district: '',
|
|
|
+ citys: [],
|
|
|
+ city: '',
|
|
|
+ polygons: [],
|
|
|
+ selectedOptions1: [],
|
|
|
+ areacode: '',
|
|
|
+ address: '',
|
|
|
+ objPoint: [],
|
|
|
+ markers: [],
|
|
|
+ zoomEnable: true,
|
|
|
+ dragEnable: true,
|
|
|
+ status: true,
|
|
|
+ center: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type'],
|
|
|
+ computed: {
|
|
|
+ showFlag() {
|
|
|
+ return this.flagVisible
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ selectedOptions: {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.province = CodeToText[newValue[0]]
|
|
|
+ this.selectP(this.province)
|
|
|
+ this.city = CodeToText[newValue[1]]
|
|
|
+ this.selectC(CodeToText[newValue[1]])
|
|
|
+ this.district = newValue[2]
|
|
|
+ this.selectD(this.district)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ // 已载入高德地图API，则直接初始化地图
|
|
|
+ if (window.AMap && window.AMapUI) {
|
|
|
+ this.initMap()
|
|
|
+ // 未载入高德地图API，则先载入API再初始化
|
|
|
+ } else {
|
|
|
+ await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
|
|
|
+ await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
|
|
|
+ this.initMap()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // console.log(this)
|
|
|
+ setTimeout(() => {
|
|
|
+ var that = this
|
|
|
+ this.map = new AMap.Map('mapContainer', {
|
|
|
+ resizeEnable: true,
|
|
|
+ zoom: 10,
|
|
|
+ zoomEnable: this.zoomEnable,
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.marker = new AMap.Marker({
|
|
|
+ icon: new AMap.Icon({
|
|
|
+ size: new AMap.Size(0, 0),
|
|
|
+ image: image,
|
|
|
+ }),
|
|
|
+ map: that.map,
|
|
|
+ })
|
|
|
+ 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,
|
|
|
+ });
|
|
|
+
|
|
|
+ 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) {
|
|
|
+ // 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)
|
|
|
+ that.marker.setPosition(that.position)
|
|
|
+ geocoder.getAddress(that.position, function(status, result) {
|
|
|
+ if (status === 'complete') {
|
|
|
+ var obj = {}
|
|
|
+ obj.formattedAddress = result.regeocode.formattedAddress
|
|
|
+ obj.areacode = result.regeocode.addressComponent.adcode
|
|
|
+ that.address = result.regeocode.formattedAddress
|
|
|
+ that.$emit('positionAddress', obj)
|
|
|
+ that.province = result.regeocode.addressComponent.province
|
|
|
+ that.city = result.regeocode.addressComponent.city
|
|
|
+ that.district = result.regeocode.addressComponent.district
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.map.setFitView()
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }, 500)
|
|
|
+ this.loadmap()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ positions() {
|
|
|
+ this.status = false
|
|
|
+ var status = {
|
|
|
+ zoomEnable: false,
|
|
|
+ dragEnable: false,
|
|
|
+ }
|
|
|
+ this.map.setStatus(status)
|
|
|
+ this.loadmap()
|
|
|
+ let _data = []
|
|
|
+ _data.push(this.province)
|
|
|
+ _data.push(this.city)
|
|
|
+ _data.push(this.district)
|
|
|
+ _data.push(this.address)
|
|
|
+ _data.push(this.type)
|
|
|
+ this.$emit('addressListen', _data)
|
|
|
+ },
|
|
|
+ anewselect() {
|
|
|
+ this.status = true
|
|
|
+ var status = {
|
|
|
+ zoomEnable: true,
|
|
|
+ dragEnable: true,
|
|
|
+ }
|
|
|
+ this.map.setStatus(status)
|
|
|
+ this.loadmap()
|
|
|
+ },
|
|
|
+ loadmap(val) {
|
|
|
+ let params = val
|
|
|
+ var that = this // 插件
|
|
|
+ for (var j = 0, k = that.polygons.length; j < k; j++) {
|
|
|
+ that.polygons[j].setMap(null)
|
|
|
+ }
|
|
|
+ AMap.plugin(['AMap.DistrictSearch', 'AMap.Polygon'], function() {
|
|
|
+ // 标注
|
|
|
+ var opts = {
|
|
|
+ subdistrict: 1,
|
|
|
+ extensions: 'all',
|
|
|
+ showbiz: false,
|
|
|
+ }
|
|
|
+ var district = new AMap.DistrictSearch(opts) // 注意：需要使用插件同步下发功能才能这样直接使用
|
|
|
+ function getData(data) {
|
|
|
+ console.log(data)
|
|
|
+ that.$emit('selectedAddress', data)
|
|
|
+ // 清除地图上的所有覆盖物
|
|
|
+ that.areacode = data.citycode
|
|
|
+ var bounds = data.boundaries
|
|
|
+ if (data.level === 'country') {
|
|
|
+ that.provinces = data.districtList
|
|
|
+ that.citys = []
|
|
|
+ that.districts = []
|
|
|
+ } else if (data.level === 'province') {
|
|
|
+ that.map.remove(that.marker)
|
|
|
+ that.citys = data.districtList
|
|
|
+ that.districts = []
|
|
|
+ that.address = ''
|
|
|
+ } else if (data.level === 'city') {
|
|
|
+ that.districts = data.districtList
|
|
|
+ }
|
|
|
+ if (data.level === 'country' && bounds) {
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ for (var i = 0, l = bounds.length; i < l; i++) {
|
|
|
+ var polygon = new AMap.Polygon({
|
|
|
+ map: that.map,
|
|
|
+ strokeWeight: 1,
|
|
|
+ strokeColor: '#CC66CC',
|
|
|
+ fillColor: '#CCF3FF',
|
|
|
+ fillOpacity: 0.5,
|
|
|
+ path: bounds[i],
|
|
|
+ })
|
|
|
+ that.polygons.push(polygon)
|
|
|
+ }
|
|
|
+ that.map.setFitView()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let sear = val ? params : '中国'
|
|
|
+ district.search(sear, function(status, result) {
|
|
|
+ if (status === 'complete') {
|
|
|
+ getData(result.districtList[0])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectP(val) {
|
|
|
+ this.province = CodeToText[val]
|
|
|
+ if (this.status) {
|
|
|
+ this.$emit('provinceChange', val)
|
|
|
+ this.loadmap(val)
|
|
|
+ this.city = ''
|
|
|
+ this.district = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectC(val) {
|
|
|
+ console.log(val)
|
|
|
+ if (this.status) {
|
|
|
+ this.loadmap(val)
|
|
|
+ this.district = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectD(val) {
|
|
|
+ this.district = CodeToText[val]
|
|
|
+ if (this.status) {
|
|
|
+ this.loadmap(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let _data = []
|
|
|
+ _data.push(this.province)
|
|
|
+ _data.push(this.city)
|
|
|
+ _data.push(this.district)
|
|
|
+ _data.push(this.address)
|
|
|
+ _data.push(this.type)
|
|
|
+ this.$emit('addressListen', _data)
|
|
|
+ this.$parent.blurMap()
|
|
|
+ console.log("submit")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
mxx