From bcfb18f33fe5b757f3b195e9cbdadb8917080599 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期四, 20 六月 2024 10:15:05 +0800 Subject: [PATCH] bug修改 --- src/views/safetyReview/projectManage/components/mapLocation.vue | 30 ++++++++++++++++++++++-------- 1 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/views/safetyReview/projectManage/components/mapLocation.vue b/src/views/safetyReview/projectManage/components/mapLocation.vue index dcb20b3..09e8069 100644 --- a/src/views/safetyReview/projectManage/components/mapLocation.vue +++ b/src/views/safetyReview/projectManage/components/mapLocation.vue @@ -17,15 +17,20 @@ </div> <div class="mapLocation_latlng"> <span>经度:</span> - <el-input class="mapLocation_latlng_input" id="lng" v-model="state.longitude"></el-input> + <el-input class="mapLocation_latlng_input" id="lng" v-model="state.longitude" @change="getAdress"></el-input> </div> <div class="mapLocation_latlng"> <span>纬度:</span> - <el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude"></el-input> + <el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude" @change="getAdress"></el-input> </div> + <div class="mapLocation_latlng"> + <span>地址:</span> + <el-input class="mapLocation_latlng_input" id="lat" v-model="state.BAddress"></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"> + <baidu-map class="map" @ready="getAdress" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="state.center" :zoom="state.zoom" scroll-wheel-zoom @click="getPosition"> <div style="position: absolute;z-index: 999;margin-top: -495px"> <label>搜索:<input v-model="state.keyword"></label> <bm-local-search @@ -35,12 +40,9 @@ :pageCapacity="3" ></bm-local-search> </div> - <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"> @@ -51,7 +53,7 @@ </template> <script setup> -import {ref, onMounted, reactive, toRefs, defineComponent,defineExpose,defineEmits} from 'vue'; +import {ref, onMounted, reactive, toRefs, defineComponent, defineExpose, defineEmits, watch} from 'vue'; import { BaiduMap,BmMarker,BmLocalSearch } from 'vue-baidu-map-3x' const state = reactive({ title: '', @@ -64,7 +66,8 @@ lat: '39.88973394962104' }, keyword:'', - location: '' + location: '', + BAddress: '' }) const emit = defineEmits(['giveLatLng']) @@ -77,6 +80,7 @@ const getPosition = ({type, target, point, pixel, overlay})=>{ state.longitude = point.lng state.latitude = point.lat + getAdress() } const openMapLocation=(longitude,latitude)=>{ @@ -108,6 +112,16 @@ const initMap=()=>{ } +const myGeo = ref(null) +const getAdress = () => { + myGeo.value = new BMap.Geocoder(); + const pt = new BMap.Point(state.longitude, state.latitude); + myGeo.value.getLocation(pt,function(result){ + state.BAddress = result.address; //获取到当前定位的详细地址信息 + }, + { enableHighAccuracy: true } + ); +} defineExpose({ openMapLocation -- Gitblit v1.9.2