From 48b9dbfb66cf8bf6c83dac0f9365ba71d3181fba Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: Tue, 27 Feb 2024 15:55:41 +0800
Subject: [PATCH] bug修改增加地图搜索
---
src/views/safetyReview/projectManage/components/mapLocation.vue | 116 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 68 insertions(+), 48 deletions(-)
diff --git a/src/views/safetyReview/projectManage/components/mapLocation.vue b/src/views/safetyReview/projectManage/components/mapLocation.vue
index 27b8fd2..50790c8 100644
--- a/src/views/safetyReview/projectManage/components/mapLocation.vue
+++ b/src/views/safetyReview/projectManage/components/mapLocation.vue
@@ -1,55 +1,70 @@
<template>
- <el-dialog
- v-model="state.mapLocationVisible"
- append-to-body
- :close-on-click-modal="false"
- width="75%"
- :title="state.title"
- >
- <div class="mapLocation_head">
- <div>
- <el-alert
- title="点击地点获取经纬度信息"
- type="info"
- :closable="false"
- >
- </el-alert>
- </div>
- <div class="mapLocation_latlng">
- <span>经度：</span>
- <el-input class="mapLocation_latlng_input" id="lng" v-model="state.longitude"></el-input>
- </div>
- <div class="mapLocation_latlng">
- <span>纬度：</span>
- <el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude"></el-input>
- </div>
+ <el-dialog
+ v-model="state.mapLocationVisible"
+ append-to-body
+ :close-on-click-modal="false"
+ width="75%"
+ :title="state.title"
+ >
+ <div class="mapLocation_head">
+ <div>
+ <el-alert
+ title="点击地点获取经纬度信息"
+ type="info"
+ :closable="false"
+ >
+ </el-alert>
+ </div>
+ <div class="mapLocation_latlng">
+ <span>经度：</span>
+ <el-input class="mapLocation_latlng_input" id="lng" v-model="state.longitude"></el-input>
+ </div>
+ <div class="mapLocation_latlng">
+ <span>纬度：</span>
+ <el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude"></el-input>
+ </div>
+ </div>
+ <div class="mapLocation_body">
+ <baidu-map class="map" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="state.center" :zoom="state.zoom" scroll-wheel-zoom @ready="initMap" @click="getPosition">
+ <div style="position: absolute;z-index: 999;margin-top: -495px">
+ <label>搜索：<input v-model="state.keyword"></label>
+ <bm-local-search
+ :keyword="state.keyword"
+ :auto-viewport="true"
+ location="新疆"
+ :pageCapacity="3"
+ ></bm-local-search>
</div>
- <div class="mapLocation_body">
- <baidu-map class="map" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="state.center" :zoom="15" scroll-wheel-zoom @ready="initMap" @click="getPosition">
- <bm-marker :position="{lng: state.longitude, lat: state.latitude}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
- <bm-label content="选择地点" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
- </bm-marker>
- </baidu-map>
- </div>
- <div align="right" style="margin-top: 10px">
- <el-button @click="state.mapLocationVisible = false">取消</el-button>
- <el-button type="primary" @click="submitLatLng()">确认</el-button>
- </div>
- </el-dialog>
+
+ <bm-marker :position="{lng: state.longitude, lat: state.latitude}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
+ <bm-label content="选择地点" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
+ </bm-marker>
+
+
+ </baidu-map>
+ </div>
+ <div align="right" style="margin-top: 10px">
+ <el-button @click="state.mapLocationVisible = false">取消</el-button>
+ <el-button type="primary" @click="submitLatLng()">确认</el-button>
+ </div>
+ </el-dialog>
</template>
<script setup>
import {ref, onMounted, reactive, toRefs, defineComponent,defineExpose,defineEmits} from 'vue';
-import { BaiduMap,BmMarker } from 'vue-baidu-map-3x'
+import { BaiduMap,BmMarker,BmLocalSearch } from 'vue-baidu-map-3x'
const state = reactive({
title: '',
longitude: '',
latitude: '',
mapLocationVisible: false,
+ zoom: 7,
center: {
- lng: '116.404',
- lat: '39.915'
- }
+ lng: '87.62472586600425',
+ lat: '43.82743324701045'
+ },
+ keyword:'',
+ location: ''
})
const emit = defineEmits(['giveLatLng'])
@@ -67,6 +82,11 @@
const openMapLocation=(longitude,latitude)=>{
state.longitude = longitude
state.latitude = latitude
+ state.zoom = 13
+ state.center = {
+ lng: longitude,
+ lat: latitude
+ }
state.mapLocationVisible = true
}
@@ -100,19 +120,19 @@
}
}
.mapLocation_head{
- width:100%;
- height:100px;
+ width:100%;
+ height:100px;
}
.mapLocation_body{
- width:100%;
- height:500px
+ width:100%;
+ height:500px
}
.mapLocation_latlng{
- padding-top:10px;
- display:inline-block;
- margin-right: 20px;
+ padding-top:10px;
+ display:inline-block;
+ margin-right: 20px;
}
.mapLocation_latlng_input{
- width:250px;
+ width:250px;
}
</style>
--
Gitblit v1.9.2