From 19d26f24c73756001ef349c093c498a24d2c05f8 Mon Sep 17 00:00:00 2001 From: guoshipeng <3194674006@qq.com> Date: Wed, 06 Sep 2023 14:16:11 +0800 Subject: [PATCH] fix:查询添加区域 --- src/components/map/pickCoordinate1.vue | 111 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 63 insertions(+), 48 deletions(-) diff --git a/src/components/map/pickCoordinate1.vue b/src/components/map/pickCoordinate1.vue index 8016aba..26078de 100644 --- a/src/components/map/pickCoordinate1.vue +++ b/src/components/map/pickCoordinate1.vue @@ -12,11 +12,11 @@ <div style="display: flex"> <div style="display: flex; width: 300px"> <div>���������</div> - <a-input + <!-- <a-input placeholder="���������������" id="tipinput" style="width: 160px; height: 26px" - ></a-input> + ></a-input> --> <!-- <a-input v-model="input" placeholder="���������������" @@ -24,6 +24,18 @@ style="width: 160px; height: 26px" @change="searchMap" ></a-input> --> + <input v-model="input" id="tipinput" /><button + @click="searchAddress" + style=" + background-color: #1890ff; + color: white; + border: none; + margin-left: 5px; + " + > + ������ + </button> + <div id="panel"></div> <!-- <a-button size="small" type="primary" @@ -61,6 +73,7 @@ :zoom="zoom" :scroll-wheel-zoom="true" style="height: 400px; width: 100%; margin-top: 20px" + id="amap" > <el-amap-marker :position="clickPoint" @@ -68,6 +81,7 @@ :dragging="true" ></el-amap-marker> </el-amap> + <!-- :scroll-wheel-zoom="true"--> <!-- <baidu-map :center="center" @@ -104,6 +118,8 @@ } from 'vue-property-decorator'; import any = jasmine.any; import { get, post } from "@/util/request"; +import $ from 'jquery' +import func from 'vue-temp/vue-editor-bridge'; @Component({ @@ -146,54 +162,43 @@ // this.center.lat = newVal.lat } private created() { - console.log(this.clickPoint,'clickPoint'); + // console.log(this.clickPoint,'clickPoint'); } - // ��������������� - // private handler({BMap, map}) { - // this.center.lng = this.typeOperation === 'add' ? '120.726838' : this.lnglat.split(',')[1] - // this.center.lat = this.typeOperation === 'add' ? '31.3421' : this.lnglat.split(',')[0] - // this.zoom = 19 - - // } - private selectPoi(e){ - console.log(e); - let poi = e - if (poi.length > 0) { - this.clickPoint = [poi[0].lng, poi[0].lat] - } - } private input:any='' private mark:any='' - private searchMap(){ - var autoOptions = { - input: "tipinput" - }; - var auto = new AMap.AutoComplete(autoOptions); - const placeSearch = new AMap.PlaceSearch(this.input); - console.log(window); - auto.on("select", select);//������������������������������������������������ - function select(e) { - console.log(e.poi.adcode); - placeSearch.setCity(e.poi.adcode); - placeSearch.search(e.poi.name); //��������������������� - } - // ��������������� - // console.log(this.input); - // placeSearch.search(this.input, (status, result) => { - // // ������������������result������������������POI������ - - // console.log(result);//��������������������������������������������������������������������������� - // }); - // // ������������������������ - // AMap.event.addListener(placeSearch, "selectChanged", (SelectChangeEvent) => { - // // ������������������������������������������ - // this.mark = SelectChangeEvent.selected.data; - // console.log(SelectChangeEvent.selected.data,'������'); - // }); - - } + private searchAddress() { + var map = new AMap.Map("amap", { + resizeEnable: true + }); + var placeSearch = new AMap.PlaceSearch({ + pageSize: 5, // ������������������������ + pageIndex: 1, // ������ + city: "������", // ��������������� + citylimit: false, //��������������������������������������������� + panel: "panel", // ��������������������������������������������� + map: map, // ��������������������������� + autoFitView: true // ������������������������������������������ Marker��������������������������������� + }); + //��������������� + placeSearch.search(this.input) + var salf=this + var markerone=0 + map.on('click',click); + function click(e){ + if(markerone===1){ + map.remove(map.Marker) + } + salf.mapClick(e) + map.Marker=new AMap.Marker({ + map: map, + position: salf.clickPoint, + animation:"AMAP_ANIMATION_BOUNCE" + }) + markerone=1 + } + } // ��������������������������� private clickPoint: any = this.lnglat === '' ? [ 120.720262, @@ -204,10 +209,10 @@ ] private mapClick(e: any) { + // console.log(e); const { lng, lat } = e.lnglat this.clickPoint=[ lng, lat] - this.$forceUpdate() - // console.log(this.clickPoint); + console.log(this.clickPoint); } private handleMapCancel() { @@ -268,9 +273,19 @@ } .amap-sug-result { position: absolute; - z-index: 9999 !important;; + z-index: 9999 !important; background-color: #fefefe; border: 1px solid #d1d1d1; bottom: auto; } +#panel { + z-index: 999; + position: absolute; + background-color: white; + max-height: 100%; + overflow-y: auto; + left: 25px; + width: 280px; + top: 126px; +} </style> -- Gitblit v1.8.0