From c58bd2354c5cb0f0cd66d01d819979ab0f0e132f Mon Sep 17 00:00:00 2001 From: guoshipeng <3194674006@qq.com> Date: Wed, 16 Aug 2023 08:46:09 +0800 Subject: [PATCH] fix: --- src/components/map/pickCoordinate1.vue | 106 +++++++++++++++++++++++----------- package-lock.json | 11 +++ tsconfig.json | 2 package.json | 1 src/main.ts | 2 5 files changed, 85 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 64a96cd..df69bf0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "date-fns": "^2.8.1", "echarts": "^4.5.0", "font-awesome": "^4.7.0", + "jquery": "^3.7.0", "lodash": "^4.17.15", "moment": "^2.24.0", "numeral": "^2.0.6", @@ -11267,6 +11268,11 @@ "engines": { "node": ">=6" } + }, + "node_modules/jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==" }, "node_modules/js-beautify": { "version": "1.13.13", @@ -29300,6 +29306,11 @@ } } }, + "jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==" + }, "js-beautify": { "version": "1.13.13", "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.13.13.tgz", diff --git a/package.json b/package.json index bcfb9e5..19a4e78 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "date-fns": "^2.8.1", "echarts": "^4.5.0", "font-awesome": "^4.7.0", + "jquery": "^3.7.0", "lodash": "^4.17.15", "moment": "^2.24.0", "numeral": "^2.0.6", diff --git a/src/components/map/pickCoordinate1.vue b/src/components/map/pickCoordinate1.vue index a114ea1..c20c495 100644 --- a/src/components/map/pickCoordinate1.vue +++ b/src/components/map/pickCoordinate1.vue @@ -17,16 +17,17 @@ id="tipinput" style="width: 160px; height: 26px" ></a-input> --> - <a-input + <!-- <a-input v-model="input" placeholder="���������������" id="tipinput" style="width: 160px; height: 26px" @change="searchMap" - ></a-input> - <!-- <input v-model="input" id="tipinput" /><button @click="searchAddress"> + ></a-input> --> + <input v-model="input" id="tipinput" /><button @click="searchAddress"> ������ - </button> --> + </button> + <div id="panel"></div> <!-- <a-button size="small" type="primary" @@ -64,6 +65,7 @@ :zoom="zoom" :scroll-wheel-zoom="true" style="height: 400px; width: 100%; margin-top: 20px" + id="amap" > <el-amap-marker :position="clickPoint" @@ -71,6 +73,7 @@ :dragging="true" ></el-amap-marker> </el-amap> + <!-- :scroll-wheel-zoom="true"--> <!-- <baidu-map :center="center" @@ -107,6 +110,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({ @@ -149,7 +154,7 @@ // this.center.lat = newVal.lat } private created() { - console.log(this.clickPoint,'clickPoint'); + // console.log(this.clickPoint,'clickPoint'); } // ��������������� @@ -168,34 +173,64 @@ // } private input:any='' private mark:any='' - 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 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 } - } - // private searchAddress() { - // var placeSearch = new AMap.PlaceSearch({ - // pageSize: 5, // ������������������������ - // pageIndex: 1, // ������ - // city: "������", // ��������������� - // citylimit: true, //��������������������������������������������� - // panel: "panel", // ��������������������������������������������� - // autoFitView: true // ������������������������������������������ Marker��������������������������������� - // }); - // //��������������� - // placeSearch.search('������������'); - - // } + // 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, @@ -206,10 +241,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() { @@ -281,7 +316,8 @@ background-color: white; max-height: 100%; overflow-y: auto; - right: 0; + left: 25px; width: 280px; + top: 126px; } </style> diff --git a/src/main.ts b/src/main.ts index 838b768..cf75cbb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,7 +11,7 @@ //������������ import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { - ak: '9FrZ6v3P8xS290ygi40M5Ik3Fgwes4KY'//������������key + ak: 'c4e73f2c6972766d6a54dffd2f501cac'//������������key }) import AMap from 'vue-amap' diff --git a/tsconfig.json b/tsconfig.json index e94dfba..428a122 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -37,5 +37,5 @@ , ], "exclude": [ "node_modules" - ] + ], } -- Gitblit v1.8.0