zhouwenxuan
2024-02-27 48b9dbfb66cf8bf6c83dac0f9365ba71d3181fba
src/views/safetyReview/projectManage/components/mapLocation.vue
@@ -25,10 +25,22 @@
      </div>
    </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">
      <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>
        <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">
@@ -40,16 +52,19 @@
<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
}