bug修改

zhouwx

2024-06-14 137910cf4fc73a3a2787a3a02718f1e1f637c368

 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: '116.42585576793277',
    lat: '39.88973394962104'
  },
  keyword:'',
  location: ''
})

const emit = defineEmits(['giveLatLng'])
@@ -65,8 +80,23 @@
}

const openMapLocation=(longitude,latitude)=>{
  state.longitude = longitude
  state.latitude = latitude
  if(longitude != ""){
    state.longitude = longitude
    state.latitude = latitude
    state.zoom = 13
    state.center = {
      lng: longitude,
      lat: latitude
    }
  }else {

    state.zoom = 7
    state.center = {
      lng: '87.61552721758208',
      lat: '43.839018284106565'
    }
  }

  state.mapLocationVisible = true
}

@@ -100,19 +130,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>