请你扮演一个资深前端,用vue结合百度地图写一个通过按钮打开弹框(el-dialog),点击地图某个位置可以直接选择点位,也可以通过搜索地点选择点位,最后通过确定操作关闭弹框并把拿到的经纬度和中文名字展示在页面上,请你写一个完整的可运行无报错的vue案例
时间: 2024-02-28 07:52:59 浏览: 82
好的,我可以帮你完成这个任务。首先,我们需要安装两个依赖:百度地图 JavaScript API 和 Element UI (用于弹框组件 el-dialog)。
在终端中输入以下命令安装:
```
npm install vue-baidu-map element-ui
```
然后在 Vue 项目中引入这两个依赖:
```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: '你的百度地图API密钥'
})
Vue.use(ElementUI)
```
注意,你需要替换掉上面代码中的“你的百度地图API密钥”为你自己申请的密钥。
接下来,我们在组件中使用 el-dialog 和百度地图组件:
```vue
<template>
<div>
<el-button type="primary" @click="dialogVisible = true">打开地图</el-button>
<el-dialog title="选择位置" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
<baidu-map @click="handleMapClick" :center="mapCenter" :zoom="mapZoom"></baidu-map>
<el-autocomplete v-model="searchText" placeholder="请输入地点" @select="handleSearchSelect"></el-autocomplete>
<el-button slot="footer" type="primary" @click="handleOk">确定</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
mapCenter: {lng: 116.404, lat: 39.915},
mapZoom: 15,
searchText: '',
selectedLocation: null
}
},
methods: {
handleMapClick(e) {
this.selectedLocation = {
lng: e.point.lng,
lat: e.point.lat,
name: ''
}
},
handleSearchSelect(item) {
this.selectedLocation = {
lng: item.point.lng,
lat: item.point.lat,
name: item.title
}
},
handleClose(done) {
if (this.selectedLocation) {
done()
} else {
this.$confirm('确定要关闭吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
done()
}).catch(() => {})
}
},
handleOk() {
if (this.selectedLocation) {
const {lng, lat, name} = this.selectedLocation
this.$message.success(`你选择了位置:${name},经度:${lng},纬度:${lat}`)
this.dialogVisible = false
} else {
this.$message.warning('请先选择位置')
}
}
}
}
</script>
```
上面的代码中,我们使用了 el-button、el-dialog、baidu-map、el-autocomplete 和 el-message 等组件。其中,baidu-map 组件是百度地图组件,el-autocomplete 是 Element UI 的文本输入提示组件,el-message 是 Element UI 的消息提示组件。
在脚本部分,我们定义了一些数据和方法。其中,mapCenter 和 mapZoom 是地图的中心点和缩放级别,searchText 是用户输入的搜索文本,selectedLocation 是用户选择的位置信息,包括经度、纬度和中文名字。然后,handleMapClick 和 handleSearchSelect 分别处理地图点击事件和搜索结果选中事件,将用户选择的位置信息保存在 selectedLocation 中。handleClose 方法在弹框关闭前进行验证,如果用户已经选择了位置,则直接关闭;否则,弹出确认框让用户确认是否关闭。handleOk 方法在用户点击确定按钮时执行,如果用户已经选择了位置,则展示位置信息并关闭弹框;否则,提示用户先选择位置。
现在,我们就完成了一个通过按钮打开弹框,在地图上选择位置并展示位置信息的功能。
阅读全文