From 293a5597a6823edc5c64372ec41b1024c9f87ee0 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 12 Sep 2024 16:04:03 +0800
Subject: [PATCH] fix: 责任单位修改
---
src/views/toCarryOutLegislativeReforms/components/locationMap.vue | 183 +++++++++++++++++++++++++++++++++++----------
1 files changed, 142 insertions(+), 41 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/components/locationMap.vue b/src/views/toCarryOutLegislativeReforms/components/locationMap.vue
index 847753a..4977b9b 100644
--- a/src/views/toCarryOutLegislativeReforms/components/locationMap.vue
+++ b/src/views/toCarryOutLegislativeReforms/components/locationMap.vue
@@ -7,25 +7,50 @@
width="1000px"
center
:before-close="close"
+ @closed="close"
>
- <div class="searchBox">
- <el-input
- v-model="placeSearch"
- placeholder="���������������"
- class="input-with-select"
- >
- <el-button
- slot="append"
- icon="el-icon-search"
- @click="search"
- />
- </el-input>
- </div>
- <div id="panel" />
<div
v-if="visible"
class="mapBox"
>
+ <div
+ class="searchBox"
+ >
+ <el-input
+ id="tipinput"
+ v-model="placeSearchName"
+ :disabled="$parent.mapType!=='edit'"
+ prefix-icon="el-icon-search"
+ placeholder="���������������"
+ class="input-with-select"
+ style="margin-right: 10px"
+ @keyup.enter.native="searchPlace"
+ />
+ <el-input
+ v-model="positionInput"
+ :disabled="$parent.mapType!=='edit'"
+ prefix-icon="el-icon-position"
+ placeholder="������������������"
+ class="input-with-select"
+ style="margin-right: 10px"
+ @keyup.enter.native="searchAddress"
+ />
+ <el-button
+ v-if="$parent.mapType==='edit'"
+ type="primary"
+ @click="search"
+ >
+ ������
+ </el-button>
+ <el-button
+ v-if="$parent.mapType==='edit'"
+ type="primary"
+ :disabled="placeSearchName===''"
+ @click="close"
+ >
+ ������
+ </el-button>
+ </div>
<div id="mapd" />
</div>
</el-dialog>
@@ -41,7 +66,12 @@
return {
title: '������������',
map: null,
- placeSearch: null
+ geolocation: null,
+ marker: null,
+ placeSearchName: '',
+ mapPlaceSearch: null,
+ position: [],
+ positionInput: ''
}
},
mounted () {
@@ -61,37 +91,104 @@
resizeEnable: true,
zooms: [3, 18],
zoom: 15,
- center: [120.9781494, 31.4265156]
})
this.map = map
-
- const lnglat = new AMap.LngLat('120.9781494', '31.4265156')
- const marker = new AMap.Marker({
- position: lnglat
- })
-
- // ������������������������������������������������������
- marker.setAnimation('AMAP_ANIMATION_BOUNCE')
- marker.setMap(this.map)
- AMap.service(['AMap.PlaceSearch'], function () {
- // ���������������������
- var placeSearch = new AMap.PlaceSearch({
- pageSize: 5, // ������������������������
- pageIndex: 1, // ������
- city: '010', // ���������������
- citylimit: true, // ���������������������������������������������
- map: map, // ���������������������������
- panel: 'panel', // ���������������������������������������������
- autoFitView: true // ������������������������������������������ Marker���������������������������������
+ let that = this
+ AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
+ // ���������Autocomplete
+ let autoOptions = {
+ // city ���������������������������
+ city: '������',
+ input: 'tipinput',
+ }
+ that.mapPlaceSearch = new AMap.PlaceSearch({
+ map: map,
})
- // ���������������
- placeSearch.search('������������')
+ // that.geolocation = new AMap.Geolocation({})
+ let autoComplete = new AMap.Autocomplete(autoOptions)
+ AMap.event.addListener(autoComplete, 'select', function (e) {
+ that.map.clearMap()
+ this.position = []
+ console.log('eee', e.poi.name)
+ console.log('eee', that.placeSearchName)
+ that.placeSearchName = e.poi.name
+ // that.mapPlaceSearch.search(e.poi.name)
+ })
+ AMap.event.addListener(that.mapPlaceSearch, 'markerClick', function (e) {
+ that.position = [e.data.location.lng, e.data.location.lat]
+ that.positionInput = e.data.location.lng + ',' + e.data.location.lat
+ this.placeSearchName = e.data.cityname + e.data.adname + e.data.address
+ console.log(e)
+ console.log(this.placeSearchName)
+ document.getElementById('tipinput').value = e.data.cityname + e.data.adname + e.data.address
+ })
+ })
+ if (this.$parent.mapType === 'edit') {
+ map.on('click', function (ev) {
+ that.map.clearMap()
+ that.position = [ev.lnglat.lng, ev.lnglat.lat]
+ that.positionInput = ev.lnglat.lng + ',' + ev.lnglat.lat
+ that.marker = new AMap.Marker({
+ position: that.position,
+ offset: new AMap.Pixel(-13, -30)
+ })
+ that.marker.setMap(map)
+ that.getAddress(that.position)
+ })
+ } else {
+ this.map.clearMap()
+ that.marker = new AMap.Marker({
+ map: map,
+ position: that.$parent.position
+ })
+ that.positionInput = that.toFixed(that.$parent.position[0], 8) + ',' + that.toFixed(that.$parent.position[1], 8)
+ that.marker.setMap(map)
+ that.map.setCenter(that.$parent.position)
+ that.marker.setAnimation('AMAP_ANIMATION_BOUNCE')
+ this.placeSearchName = this.$parent.address
+ }
+ },
+ toFixed (str, decimalPlaces) {
+ const num = parseFloat(str)
+ return num.toFixed(decimalPlaces)
+ },
+ getAddress (position) {
+ AMap.plugin('AMap.Geocoder', () => {
+ const geocoder = new AMap.Geocoder({})
+ geocoder.getAddress(position, (status, result) => {
+ if (status === 'complete' && result.info === 'OK') {
+ this.placeSearchName = result.regeocode.formattedAddress
+ document.getElementById('tipinput').value = result.regeocode.formattedAddress
+ }
+ })
})
},
search () {
- let this_ = this
+ console.log('search', this.placeSearchName)
+ if (this.positionInput) {
+ this.searchAddress()
+ return
+ }
+ if (this.placeSearchName) {
+ this.searchPlace(this.placeSearchName)
+ }
+ },
+ searchPlace () {
+ this.mapPlaceSearch.search(this.placeSearchName)
+ },
+ searchAddress () {
+ this.map.clearMap()
+ this.marker = new AMap.Marker({
+ map: this.map,
+ position: this.positionInput.split(',')
+ })
+ this.marker.setMap(this.map)
+ this.map.setCenter(this.positionInput.split(','))
+ this.getAddress(this.positionInput.split(','))
},
close () {
+ this.map.destroy()
+ this.$emit('addressAndLnt', this.position, this.placeSearchName)
this.$emit('update:visible', false)
}
}
@@ -101,13 +198,17 @@
<style scoped lang="scss">
/deep/.el-dialog__body {
height: 600px;
- .searchBox {
- margin-bottom: 10px;
- }
.mapBox {
width: 100%;
height: 100%;
padding-bottom: 30px;
+ position: relative;
+ .searchBox{
+ position: absolute;
+ display: flex;
+ z-index: 100;
+ width: 100%;
+ }
}
}
#mapd {
--
Gitblit v1.8.0