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