请你扮演一个资深前端,用vue结合百度地图写一个通过按钮打开弹框(el-dialog),点击地图某个位置可以直接选择点位,也可以通过搜索地点选择点位,最后通过确定操作关闭弹框并把拿到的经纬度和中文名字展示在页面上,请你写一个完整的可运行无报错的vue案例
时间: 2024-02-28 12:53:20 浏览: 112
好的,我可以帮你实现这个功能。首先,我们需要安装百度地图 JavaScript API 和 Element UI(用于实现 el-dialog 组件):
```bash
npm install vue-baidu-map element-ui --save
```
然后,在 main.js 中引入并注册这两个插件:
```javascript
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(BaiduMap, {
/* 这里是你申请的百度地图密钥 */
ak: 'your_ak'
})
Vue.use(ElementUI)
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
```
接着,我们在 App.vue 中实现这个功能:
```vue
<template>
<div>
<el-button type="primary" @click="openDialog">选择位置</el-button>
<el-dialog title="选择位置" :visible.sync="dialogVisible" @close="handleClose">
<div style="height: 400px;">
<baidu-map @click="handleMapClick">
<bm-marker v-if="markerVisible" :position="markerPosition"></bm-marker>
</baidu-map>
<el-input placeholder="请输入地址" v-model="searchText" @keyup.enter.native="search" style="margin-top: 10px;"></el-input>
<div style="max-height: 200px; overflow-y: auto; margin-top: 10px;">
<el-radio-group v-model="selected" @change="handleRadioChange">
<el-radio v-for="place in places" :label="place.uid" :key="place.uid" :disabled="place.location == null">
{{ place.name }} ({{ place.location ? place.location.lat + ', ' + place.location.lng : '未知位置' }})
</el-radio>
</el-radio-group>
</div>
</div>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
<div v-if="selectedPlace">
经度: {{ selectedPlace.location.lng }},纬度: {{ selectedPlace.location.lat }}
<br>
地址: {{ selectedPlace.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
searchText: '',
places: [],
selected: '',
markerVisible: false,
markerPosition: {},
selectedPlace: null
}
},
methods: {
openDialog() {
this.dialogVisible = true
},
handleClose() {
this.searchText = ''
this.places = []
this.selected = ''
this.markerVisible = false
this.selectedPlace = null
},
handleMapClick(e) {
this.markerVisible = true
this.markerPosition = e.point
},
search() {
if (this.searchText === '') return
const myGeo = new BMap.Geocoder()
myGeo.getPoint(this.searchText, point => {
if (point) {
this.markerVisible = true
this.markerPosition = point
}
})
},
handleRadioChange(value) {
const place = this.places.find(p => p.uid === value)
if (place && place.location) {
this.markerVisible = true
this.markerPosition = place.location
}
},
handleConfirm() {
if (!this.selectedPlace) return
this.dialogVisible = false
this.$message({
message: `经度: ${this.selectedPlace.location.lng},纬度: ${this.selectedPlace.location.lat}\n地址: ${this.selectedPlace.name}`,
type: 'success'
})
}
},
watch: {
searchText(value) {
if (value === '') {
this.places = []
this.selected = ''
return
}
const local = new BMap.LocalSearch(this.$BMap.map, {
onSearchComplete: results => {
if (local.getStatus() === BMAP_STATUS_SUCCESS) {
this.places = results.getCurrentNumPois() > 0 ? results.getPoi(0).ur : []
this.selected = this.places.length > 0 ? this.places[0].uid : ''
}
}
})
local.search(value)
},
selected(value) {
this.selectedPlace = this.places.find(p => p.uid === value)
}
}
}
</script>
```
这个组件包含一个 el-button 和一个 el-dialog。点击按钮会打开 el-dialog,里面包含一个百度地图和一个 el-input,用于搜索地址。搜索结果会显示在一个 el-radio-group 中,选择其中一个地址会在地图上显示出一个标记。最后,点击确定按钮会关闭 el-dialog,并在页面上展示选择的经纬度和地址。
我们在这个组件中使用了 vue-baidu-map 提供的 bm-marker、bm-map 和 $BMap,以及 Element UI 提供的 el-dialog、el-input 和 el-radio-group。在 methods 中我们实现了打开和关闭 el-dialog 的逻辑,以及各种事件的处理函数。我们使用 watch 监听 searchText 和 selected 的变化,以更新页面上的数据。
阅读全文