| | |
| | | </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"> |
| | |
| | | |
| | | <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']) |
| | |
| | | const openMapLocation=(longitude,latitude)=>{ |
| | | state.longitude = longitude |
| | | state.latitude = latitude |
| | | state.zoom = 13 |
| | | state.center = { |
| | | lng: longitude, |
| | | lat: latitude |
| | | } |
| | | state.mapLocationVisible = true |
| | | } |
| | | |