| | |
| | | </div> |
| | | <div class="mapLocation_latlng"> |
| | | <span>经度:</span> |
| | | <el-input class="mapLocation_latlng_input" id="lng" v-model="state.longitude"></el-input> |
| | | <el-input class="mapLocation_latlng_input" id="lng" v-model="state.longitude" @change="getAdress"></el-input> |
| | | </div> |
| | | <div class="mapLocation_latlng"> |
| | | <span>纬度:</span> |
| | | <el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude"></el-input> |
| | | <el-input class="mapLocation_latlng_input" id="lat" v-model="state.latitude" @change="getAdress"></el-input> |
| | | </div> |
| | | <div class="mapLocation_latlng"> |
| | | <span>地址:</span> |
| | | <el-input class="mapLocation_latlng_input" id="lat" v-model="state.BAddress"></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"> |
| | | <baidu-map class="map" @ready="getAdress" ak="BkZdiHBj9aGrMdVFM48r2njNiMzsekga" v="3.0" type="API" :center="state.center" :zoom="state.zoom" scroll-wheel-zoom @click="getPosition"> |
| | | <div style="position: absolute;z-index: 999;margin-top: -495px"> |
| | | <label>搜索:<input v-model="state.keyword"></label> |
| | | <bm-local-search |
| | |
| | | :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"> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {ref, onMounted, reactive, toRefs, defineComponent,defineExpose,defineEmits} from 'vue'; |
| | | import {ref, onMounted, reactive, toRefs, defineComponent, defineExpose, defineEmits, watch} from 'vue'; |
| | | import { BaiduMap,BmMarker,BmLocalSearch } from 'vue-baidu-map-3x' |
| | | const state = reactive({ |
| | | title: '', |
| | |
| | | lat: '39.88973394962104' |
| | | }, |
| | | keyword:'', |
| | | location: '' |
| | | location: '', |
| | | BAddress: '' |
| | | }) |
| | | |
| | | const emit = defineEmits(['giveLatLng']) |
| | |
| | | const getPosition = ({type, target, point, pixel, overlay})=>{ |
| | | state.longitude = point.lng |
| | | state.latitude = point.lat |
| | | getAdress() |
| | | } |
| | | |
| | | const openMapLocation=(longitude,latitude)=>{ |
| | |
| | | const initMap=()=>{ |
| | | |
| | | } |
| | | const myGeo = ref(null) |
| | | const getAdress = () => { |
| | | myGeo.value = new BMap.Geocoder(); |
| | | const pt = new BMap.Point(state.longitude, state.latitude); |
| | | myGeo.value.getLocation(pt,function(result){ |
| | | state.BAddress = result.address; //获取到当前定位的详细地址信息 |
| | | }, |
| | | { enableHighAccuracy: true } |
| | | ); |
| | | } |
| | | |
| | | defineExpose({ |
| | | openMapLocation |