| | |
| | | <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> |
| | |
| | | } |
| | | } |
| | | .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> |