| | |
| | | <template> |
| | | <el-dialog v-model="dialogShow" width="70%" destroy-on-close> |
| | | <el-dialog |
| | | class="dialog" |
| | | v-model="dialogShow" |
| | | width="70%" |
| | | destroy-on-close |
| | | > |
| | | <template #header> |
| | | <div> 坐标拾取</div> |
| | | <div>坐标拾取</div> |
| | | </template> |
| | | <div class="fy-tip-red">左键点击地图选取坐标点,或者根据关键字搜索地点</div> |
| | | <div class="fy-tip-red"> |
| | | 左键点击地图选取坐标点,或者根据关键字搜索地点 |
| | | </div> |
| | | <el-row> |
| | | <el-col :span="10"> |
| | | <el-form |
| | |
| | | <span>{{ searchResult.address }}</span> |
| | | <div> |
| | | <span>{{ |
| | | '高德' + searchResult.lon + ', ' + searchResult.lat |
| | | '高德:' + searchResult.lon + ', ' + searchResult.lat |
| | | }}</span> |
| | | <el-divider direction="vertical" /> |
| | | <span>{{ |
| | | 'GPS' + searchResult.gpsLon + ', ' + searchResult.gpsLat |
| | | 'GPS:' + |
| | | searchResult.gpsLon + |
| | | ', ' + |
| | | searchResult.gpsLat |
| | | }}</span> |
| | | </div> |
| | | </div> |
| | |
| | | }; |
| | | }, |
| | | props: { |
| | | show: Boolean |
| | | // 对话框显示隐藏 |
| | | show: Boolean, |
| | | // 默认搜索点经纬度,[lng, lat] |
| | | defaultCoor: Array |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | geocoder = new AMap.Geocoder({ |
| | | city: '上海' // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode |
| | | }); |
| | | if (this.defaultCoor) { |
| | | const [lng, lat] = baseMapUtil.wgs84togcj02( |
| | | this.defaultCoor[0], |
| | | this.defaultCoor[1] |
| | | ); |
| | | const lnglat = new AMap.LngLat(lng, lat); |
| | | this.setMarker(lnglat); |
| | | this.getAddress(lnglat); |
| | | this.map.setFitView(); |
| | | } |
| | | this.map.on('click', (ev) => { |
| | | // this.formObj.lon = ev.lnglat.getLng(); |
| | | // this.formObj.lat = ev.lnglat.getLat(); |
| | | this.map.clearMap(); |
| | | const marker = new AMap.Marker({ |
| | | position: ev.lnglat |
| | | }); |
| | | this.map.add(marker); |
| | | |
| | | geocoder.getAddress(ev.lnglat, (status, result) => { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | this.searchResult.address = |
| | | result.regeocode.formattedAddress; |
| | | this.searchResult.lon = ev.lnglat.getLng(); |
| | | this.searchResult.lat = ev.lnglat.getLat(); |
| | | const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84( |
| | | this.searchResult.lon, |
| | | this.searchResult.lat |
| | | ); |
| | | this.searchResult.gpsLon = gpsLon; |
| | | this.searchResult.gpsLat = gpsLat; |
| | | } |
| | | }); |
| | | this.setMarker(ev.lnglat); |
| | | this.getAddress(ev.lnglat); |
| | | }); |
| | | }); |
| | | // inited = true; |
| | |
| | | } |
| | | }); |
| | | }, |
| | | getAddress(lnglat) { |
| | | geocoder.getAddress(lnglat, (status, result) => { |
| | | if (status === 'complete' && result.info === 'OK') { |
| | | this.searchResult.address = |
| | | result.regeocode.formattedAddress; |
| | | this.searchResult.lon = lnglat.getLng(); |
| | | this.searchResult.lat = lnglat.getLat(); |
| | | const [gpsLon, gpsLat] = baseMapUtil.gcj02towgs84( |
| | | this.searchResult.lon, |
| | | this.searchResult.lat |
| | | ); |
| | | this.searchResult.gpsLon = gpsLon; |
| | | this.searchResult.gpsLat = gpsLat; |
| | | } |
| | | }); |
| | | }, |
| | | setMarker(lnglat) { |
| | | this.map.clearMap(); |
| | | const marker = new AMap.Marker({ |
| | | position: lnglat |
| | | }); |
| | | this.map.add(marker); |
| | | }, |
| | | submit() { |
| | | this.$emit('onSubmit', this.searchResult); |
| | | this.dialogShow = false; |
| | |
| | | border-radius: var(--el-border-radius-round); |
| | | box-shadow: var(--el-box-shadow); |
| | | } |
| | | |
| | | .dialog { |
| | | pointer-events: auto; |
| | | } |
| | | </style> |