From 8f51d080cabe5692c634e762a2080981be524aec Mon Sep 17 00:00:00 2001 From: guoshipeng <3194674006@qq.com> Date: Fri, 18 Aug 2023 16:16:06 +0800 Subject: [PATCH] fix:修改高德地图搜索框 --- src/components/map/pickCoordinate1.vue | 133 ++++++++++++++++++++++++++++++------------- 1 files changed, 92 insertions(+), 41 deletions(-) diff --git a/src/components/map/pickCoordinate1.vue b/src/components/map/pickCoordinate1.vue index 8016aba..2aa6d2d 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,14 @@ style="width: 160px; height: 26px" @change="searchMap" ></a-input> --> + <input v-model="input" id="tipinput" /><a-button + @click="searchAddress" + type="primary" + style="margin-left:5px" + > + ������ + </a-button> + <div id="panel"></div> <!-- <a-button size="small" type="primary" @@ -61,6 +69,7 @@ :zoom="zoom" :scroll-wheel-zoom="true" style="height: 400px; width: 100%; margin-top: 20px" + id="amap" > <el-amap-marker :position="clickPoint" @@ -68,6 +77,7 @@ :dragging="true" ></el-amap-marker> </el-amap> + <!-- :scroll-wheel-zoom="true"--> <!-- <baidu-map :center="center" @@ -104,6 +114,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,7 +158,7 @@ // this.center.lat = newVal.lat } private created() { - console.log(this.clickPoint,'clickPoint'); + // console.log(this.clickPoint,'clickPoint'); } // ��������������� @@ -156,44 +168,73 @@ // 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 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); //��������������������� + // private searchMap(){ + // var autoOptions = { + // input: "tipinput" + // }; + // var self=this + // var auto = new AMap.Autocomplete(autoOptions); + // const placeSearch = new AMap.PlaceSearch(self.input); + // // console.log(window); + // auto.on("select", select);//������������������������������������������������ + // function select(e) { + // placeSearch.setCity(e.poi.adcode); + // placeSearch.search(e.poi.name); //��������������������� + // self.clickPoint = [e.poi.location.lng, e.poi.location.lat] + // } + // } + 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 } - - // ��������������� - // 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,'������'); - // }); - - } + // function click(e){ + // console.log(e); + // salf.clickPoint=[e.lnglat.lng,e.lnglat.lat] + // } + // placeSearch.search(this.input,function(status, result){ + // console.log(result); + // auto.on('click',click); + // function click(e){ + // console.log(e); + // } + // }); + // console.log(this.input); + } // ��������������������������� private clickPoint: any = this.lnglat === '' ? [ 120.720262, @@ -204,10 +245,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 +309,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