请你扮演一个资深前端,用vue结合百度地图写一个通过按钮打开弹框(el-dialog),点击地图某个位置可以直接选择点位,也可以通过搜索地点选择点位,最后通过确定操作关闭弹框并把拿到的经纬度和中文名字展示在页面上,请你写一个完整的可运行无报错的vue案例

时间: 2024-02-28 16:53:20 浏览: 16
好的,我可以帮你实现这个功能。首先,我们需要安装百度地图 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 的变化,以更新页面上的数据。

相关推荐

最新推荐

recommend-type

vue-openlayers实现地图坐标弹框效果

主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
recommend-type

详解vue项目中调用百度地图API使用方法

主要介绍了vue项目中调用百度地图API使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
recommend-type

使用Vue组件实现一个简单弹窗效果

主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式,props 、 $emit 传参,具体组件代码也传上去了。需要的朋友可以参考下
recommend-type

vue 使用高德地图vue-amap组件过程解析

主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
recommend-type

vue中阻止click事件冒泡,防止触发另一个事件的方法

下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

用 Python 画一个可以动的爱心

好的,我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码: ```python import turtle import math # 设置画布和画笔 canvas = turtle.Screen() canvas.bgcolor("black") pencil = turtle.Turtle() pencil.speed(0) pencil.color("red", "pink") pencil.pensize(3) # 定义爱心函数 def draw_love(heart_size, x_offset=0, y_offset=0):
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。