From bbdaee6bfef24425b533d67ba13adb838403b792 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 10 Jan 2024 10:06:35 +0800
Subject: [PATCH] 地图修改
---
src/views/toCarryOutLegislativeReforms/components/locationMap.vue | 126 ++++++++++++++++++++++++++++--------------
1 files changed, 84 insertions(+), 42 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/components/locationMap.vue b/src/views/toCarryOutLegislativeReforms/components/locationMap.vue
index 847753a..7d6e68e 100644
--- a/src/views/toCarryOutLegislativeReforms/components/locationMap.vue
+++ b/src/views/toCarryOutLegislativeReforms/components/locationMap.vue
@@ -7,25 +7,25 @@
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"
+ @keyup.enter.native="searchPlace"
+ />
+ </div>
<div id="mapd" />
</div>
</el-dialog>
@@ -41,7 +41,11 @@
return {
title: '������������',
map: null,
- placeSearch: null
+ geolocation: null,
+ marker: null,
+ placeSearchName: null,
+ mapPlaceSearch: null,
+ position: []
}
},
mounted () {
@@ -61,37 +65,72 @@
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()
+ that.mapPlaceSearch.search(e.poi.name)
+ })
+ AMap.event.addListener(that.mapPlaceSearch, 'markerClick', function (e) {
+ that.position = [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.name
+ })
+ })
+ if (this.$parent.mapType === 'edit') {
+ map.on('click', function (ev) {
+ that.map.clearMap()
+ that.position = [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.marker.setMap(map)
+ that.map.setCenter(that.$parent.position)
+ that.marker.setAnimation('AMAP_ANIMATION_BOUNCE')
+ this.placeSearchName = this.$parent.address
+ }
+ },
+ 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
+ }
+ })
})
},
- search () {
- let this_ = this
+ searchPlace () {
+ this.mapPlaceSearch.search(this.placeSearchName)
},
close () {
+ this.map.destroy()
+ this.$emit('addressAndLnt', this.position, this.placeSearchName)
this.$emit('update:visible', false)
}
}
@@ -101,13 +140,16 @@
<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;
+ z-index: 100;
+ width: 100%;
+ }
}
}
#mapd {
--
Gitblit v1.8.0