zhouwenxuan
2024-02-27 eb5d50f5ce1ddc9c32ca54276952e68d0f132e0e
src/views/safetyReview/projectManage/components/mapLocation.vue
@@ -1,41 +1,41 @@
<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>
        </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>
  <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="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>
</template>
<script setup>
@@ -100,19 +100,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>