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 | 262 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 198 insertions(+), 64 deletions(-)
diff --git a/src/components/map/pickCoordinate1.vue b/src/components/map/pickCoordinate1.vue
index 89f8773..26078de 100644
--- a/src/components/map/pickCoordinate1.vue
+++ b/src/components/map/pickCoordinate1.vue
@@ -1,37 +1,112 @@
<template>
<a-modal
- title="������������"
- destroyOnClose
- :visible="true"
- @ok="addLonAndLat"
- @cancel="handleMapCancel"
- okText="������"
- class="modalStyle"
+ title="������������"
+ destroyOnClose
+ :visible="true"
+ @ok="addLonAndLat"
+ @cancel="handleMapCancel"
+ okText="������"
+ class="modalStyle"
>
-
<div>
- <p>
- <span>���������</span><a-input v-model="keyword" style="display: inline; width: 160px;height: 26px"/>
- <span style="margin-left: 25px">���������</span><a-input v-model="clickPoint.lng" style="display: inline; width: 160px;height: 26px"/>
- <span style="margin-left: 25px">���������</span><a-input v-model="clickPoint.lat" style="display: inline; width: 160px;height: 26px"/>
- </p>
-<!-- :scroll-wheel-zoom="true"-->
- <baidu-map
+ <div style="display: flex">
+ <div style="display: flex; width: 300px">
+ <div>���������</div>
+ <!-- <a-input
+ placeholder="���������������"
+ id="tipinput"
+ style="width: 160px; height: 26px"
+ ></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"
+ style="
+ background-color: #1890ff;
+ color: white;
+ border: none;
+ margin-left: 5px;
+ "
+ >
+ ������
+ </button>
+ <div id="panel"></div>
+ <!-- <a-button
+ size="small"
+ type="primary"
+ @click="searchMap"
+ style="margin-left: 10px"
+ >������</a-button
+ > -->
+
+ <!-- <el-amap-search-box
+ :search-option="searchOption"
+ :on-search-result="selectPoi"
+ style="width: 200px; height: 26px; margin-left: 10px;border;"
+ /> -->
+ <!-- <a-input style="width: 160px; height: 26px" @focus="selectPoi" /> -->
+ </div>
+ <div>
+ <span style="margin-left: 25px">���������</span
+ ><a-input
+ v-model="clickPoint[0]"
+ style="display: inline; width: 160px; height: 26px"
+ />
+ </div>
+ <div>
+ <span style="margin-left: 25px">���������</span
+ ><a-input
+ v-model="clickPoint[1]"
+ style="display: inline; width: 160px; height: 26px"
+ />
+ </div>
+ </div>
+ <el-amap
+ ref="map"
+ :center="clickPoint"
+ :events="{ click: mapClick }"
+ :zoom="zoom"
+ :scroll-wheel-zoom="true"
+ style="height: 400px; width: 100%; margin-top: 20px"
+ id="amap"
+ >
+ <el-amap-marker
+ :position="clickPoint"
+ animation="AMAP_ANIMATION_BOUNCE"
+ :dragging="true"
+ ></el-amap-marker>
+ </el-amap>
+
+ <!-- :scroll-wheel-zoom="true"-->
+ <!-- <baidu-map
:center="center"
:zoom="zoom"
@ready="handler"
- @click="mapClFick"
+ @click="mapClick"
:scroll-wheel-zoom="true"
- style="height: 400px;width: 100%;">
- <bm-control>
- <bm-local-search :keyword="keyword" :auto-viewport="true" style="display: none" ></bm-local-search>
- <bm-marker :position="{ lng:clickPoint.lng , lat: clickPoint.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
- </bm-marker>
- </bm-control>
- </baidu-map>
- </div>
+ style="height: 400px; width: 100%"
+ >
+ <bm-control>
+ <bm-local-search
+ :keyword="keyword"
+ :auto-viewport="true"
+ style="display: none"
+ ></bm-local-search>
+ <bm-marker
+ :position="{ lng: clickPoint.lng, lat: clickPoint.lat }"
+ :dragging="true"
+ animation="BMAP_ANIMATION_BOUNCE"
+ >
+ </bm-marker>
+ </bm-control>
+ </baidu-map> -->
+ </div>
</a-modal>
-
</template>
<script lang="tsx">
@@ -43,15 +118,17 @@
} 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({
})
export default class PickCoordinate extends Vue {
- private center: any = {
- lng: 120.726838,
- lat: 31.3421
- }
+ private center: any = [
+ 120.726838,
+ 31.3421
+ ]
@Prop({
type: String,
default: ''
@@ -65,13 +142,17 @@
private typeOperation!: string
private keyword: string = ''
- private zoom = 3
-
- @Watch('clickPoint', {deep: true})
- private monitorMapFlag(newVal: any, oldVal: any) {
- this.center.lng = newVal.lng
- this.center.lat = newVal.lat
+ private zoom = 19
+ private searchOption:any={
+ city: '������',
+ citylimit: false
}
+ @Watch('clickPoint', {deep: true, immediate: true},)
+ private monitorMapFlag(newVal: any, oldVal: any) {
+ console.log(newVal,'newVal');
+ this.center= [newVal.lng,newVal.lat]
+ }
+ private num1:any=1
@Watch('lnglat', {deep: true, immediate: true})
private lnglatWatch(newVal: any, oldVal: any) {
@@ -81,32 +162,57 @@
// this.center.lat = newVal.lat
}
private created() {
-
+ // 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 input:any=''
+ private mark:any=''
+
+ 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 === '' ? {
- lng: ' 120.726838',
- lat: ' 31.3421'
- } : {
- lng: this.lnglat.split(',')[1],
- lat: this.lnglat.split(',')[0]
- }
+ private clickPoint: any = this.lnglat === '' ? [
+ 120.720262,
+ 31.335757
+ ] : [
+ this.lnglat.split(',')[1],
+ this.lnglat.split(',')[0]
+ ]
private mapClick(e: any) {
- const { lng, lat } = e.point
- this.clickPoint.lng = lng
- this.clickPoint.lat = lat
+ // console.log(e);
+ const { lng, lat } = e.lnglat
+ this.clickPoint=[ lng, lat]
+ console.log(this.clickPoint);
}
private handleMapCancel() {
@@ -116,11 +222,12 @@
private addLonAndLat() {
if (this.typeOperation === 'add') {
+ console.log('add');
this.sendLonLat(this.clickPoint)
} else {
+ console.log('upa');
this.editLonLat(this.clickPoint)
}
-
this.flagSend(false)
}
@@ -131,27 +238,54 @@
@Emit('sendLonLat')
private sendLonLat(lonLat: any) {
+ console.log(lonLat,'jia');
return lonLat;
}
@Emit('editLonLat')
private editLonLat(lonLat: any) {
+ console.log(lonLat,'gai');
return lonLat;
}
}
</script>
-<style lang="less">
-
-.modalStyle{
- .ant-modal{
+<style lang="less" scoped>
+.modalStyle {
+ .ant-modal {
margin-left: 25%;
}
- .ant-modal-content{
- width: 800px;
+ .ant-modal-content {
+ width: 800px;
}
}
-.BMap_cpyCtrl,.anchorBL {
+.BMap_cpyCtrl,
+.anchorBL {
display: none;
}
+/* ���������������������logo */
+/deep/.amap-logo {
+ display: none;
+ opacity: 0 !important;
+}
+/deep/.amap-copyright {
+ opacity: 0;
+}
+.amap-sug-result {
+ position: absolute;
+ 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