vue百度地图的和element输入框/v-region的联动

vue百度地图的使用

  • 第一步:安装插件
  • 第二步:main.js中引用
  • 第三步:页面中使用

第一步:安装插件

npm install vue-baidu-map --save

第二步:main.js中引用

// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})

第三步:页面中使用

<template>
<div><el-form ref="Froms" :model="formData" :rules="rules" label-width="120px"><el-form-item label="详细地址:" prop="shopAddrExt"><el-input v-model="formData.shopAddrExt" placeholder="请输入详细地址" size="small" @input="inputShopAddr" /><div class="map"><baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="initMap" @click="getLocation"><!-- 缩放 --><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" /></baidu-map></div></el-form-item><el-form-item label="经营地区:" prop="businessArea"><!-- 要安装v-region --><v-region-group:town="false"v-model="regionArea"@change="regionChange"></v-region-group></el-form></div>
</template>
<script>
export default {data () {return {formData: {shopAddrExt: '', businessArea: ''},center: {lng: 0, lat: 0},zoom: 10,BMap: null,map: null,rules:{},regionArea: {}}},methods: {// 初始化initMap ({BMap, map}) {console.log(BMap, map)this.zoom = 15;this.BMap = BMap;this.map = map;this.geoCoder = new BMap.Geocoder(); // 创建地址解析器的实例let geolocation = new BMap.Geolocation(); // 获取当前经纬度用作地图显示中心点geolocation.getCurrentPosition((e)=>{console.log(e);this.center.lng = e.longitude;this.center.lat = e.latitude;this.setCenterZoom(e); // e获取到经纬度设置地图中心点this.setIcon(e); // 创建点坐标}// zoomend:监听地图缩放结束事件 lng表示经度,lat表示纬度(处理百度地图放大之后中心点偏移问题)// zoomstart:还有一个监听地图缩放开始事件用法和zoomend一样this.map.addEventListener('zoomend', (e)=> {this.map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat),this.map.getZoom());});},// 设置显示中心点setCenterZoom(e){this.center.lng = e.longitude;this.center.lat = e.latitude;this.centerPoint = new BMap.Point(e.longitude, e.latitude); // 选择一个经纬度作为中心点this.map.centerAndZoom(this.centerPoint, 14); // 设置地图中心点和缩放级别},// 创建点坐标setIcon(latLng){// 创建自定义标记 参数:自定义图片路径 大小 偏移量(!!!注意:如果这里icon不显示请检查图片大小是否和下面配置的new BMap.size一致)const icon = new BMap.Icon(require('../../../../../static/icon/position4.png'),new BMap.Size(32, 32),// { anchor: new BMap.Size(0, 0) })// 生成自定义图标点// 创建点const point = new BMap.Point(latLng.longitude, latLng.latitude);// 创建标注const marker = new BMap.Marker(point, { icon: icon });this.map.clearOverlays(); // 先删除this.map.addOverlay(marker);// 将标注添加到地图中// 给标记点添加点击事件marker.addEventListener('click', (e) => {// 执行想进行的操作(经个人测试在此处注册点击事件效果最佳, 该有的数据项都可以获取)console.log(e)})},// 获取地图点击的地址getLocation(e){// console.log(e.point)let latLng = {longitude: e.point.lng,latitude: e.point.lat}this.setCenterZoom(latLng);// 更改地图显示中心点this.setIcon(latLng);// 创建点坐标this.geoCoder.getLocation(e.point, (rs) => {// console.log(rs.surroundingPois) // 附近的POI点(array) // console.log(rs.business) // 商圈字段let adr = rs.addressComponents;let address = adr.province + adr.city + adr.district + adr.street + adr.streetNumber; // 省市区街道门牌号this.formData.shopAddrExt = address; // 给input框赋值})},// 根据输入的地址定位获取当前经纬度/根据当前地址获取经纬度inputShopAddr(inputValue){this.geoCoder.getPoint(inputValue, (point) => {let latLng = {longitude: point.lng,latitude: point.lat}this.setCenterZoom(latLng);// 更改地图显示中心点this.setIcon(latLng);// 创建点坐标})},///// 这里我还用了中国行政区划选择器v-region和地图的联动regionChange (data) {console.log(data)let province = data.province ? data.province.value : '';let city = data.city ? data.city.value : '';let area = data.area ? data.area.value : '';this.formData.businessArea = province + city + area;this.formData.shopProvinceId = data.province ? data.province.key : '';this.formData.shopCityId = data.city ? data.city.key : '';this.formData.shopCountryId = data.area ? data.area.key : '';this.inputShopAddr(this.formData.businessArea);}
}
</script>
<style>.map{width: 430px;height: 280px;}.BMap_cpyCtrl,.BMap_noprint {display: none;}.BMap_cpyCtrl,.anchorBL {inset: auto auto 0px 1px !important;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/673769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序(三十九)表单信息收集

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.表单收集的基本方法 2.picker的不足及解决方法 源码&#xff1a; index.wxml <!-- 用户信息 --> <view class"register"><!-- 绑定表单信息收集事件--><form bindsubmit"…

计算两个数相除后的余数返回值为浮点型math.fmod(x, y)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算两个数相除后的余数 返回值为浮点型 math.fmod(x, y) [太阳]选择题 请问以下代码执行math.fmod()后输出的结果是&#xff1f; import math print("【执行】math.fmod(10, 4)"…

sql查询大小写问题

IN() 函数大小敏感判断 如果你在使用 MySQL 的 IN() 函数时发现大小写不敏感&#xff0c;那可能是由于你的 MySQL 数据库的配置设置了大小写不敏感的规则。 这通常是由 lower_case_table_names 参数引起的。在 MySQL 中&#xff0c;这个参数决定了数据库系统在存储和比较表名…

高斯伪谱C++封装库开源!

Windows x64/86 C无依赖运行高斯伪谱法求解最优控制问题&#xff0c;你只需要ElegantGP! Author: Y. F. Zhang His Github: https://github.com/ZYunfeii 写在前面 这个库在你下载它的那一时刻起不再依赖任何其他代码&#xff0c;直接可用来构建C的最优控制问题并进行求解。…

springboot163美食推荐商城的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

C++多线程:this_thread 命名空间

std::this_thread 是 C 标准库中提供的一个命名空间&#xff0c;它包含了与当前线程相关的功能。这个命名空间提供了许多与线程操作相关的工具&#xff0c;使得在多线程环境中更容易进行编程。 源码类似于如下&#xff1a; namespace std{namespace this_thread{//...........…

图片加速接口:缓存图片,加速访问,解决防盗链

CSDN会自动把图片存到自己的图床&#xff0c;测试效果不好&#xff0c;建议到 https://www.skyqian.com/archives/speed-up-picture.html 查看效果。 引言 不知道是否有遇到以下场景&#xff1a; 图片打开很慢&#xff01;因为图片源来自于国外。图片可以正常打开&#xff0c…

在C++的union中使用std::string(非POD对象)的陷阱

struct和union的对比 union最开始是C语言中的关键字&#xff0c;在嵌入式中比较常见&#xff0c;由于嵌入式内存比较稀缺&#xff0c;所以常用union用来节约空间&#xff0c;在其他需要节省内存的地方也可以用到这个关键字&#xff0c;写一个简单程序来说明union的用途 struc…

docker 运行jar包 指定配置文件

要在Docker中运行JAR包并指定配置文件&#xff0c;你可以创建一个Dockerfile来定义你的容器环境&#xff0c;并在其中指定如何运行JAR包和配置文件。下面是一个简单的例子&#xff0c;展示了如何在Dockerfile中设置这些配置&#xff1a; 第一步&#xff1a;创建 Dockerfile文件…

第十个知识点:继承

在ES6之后&#xff0c;javascript引入了类的概念&#xff0c;也就是说与java相同&#xff0c;我们可以在js文件中创建类与对象&#xff0c;然后通过extend继承 <script>class Father {constructor(name) {//父类构造器this.name name;}speak(){//父类方法console.log(我…

生成 Python 项目requirements的最小列表

Python项目中的requirements文件 requirements.txt的格式 在Python项目中&#xff0c;通常会包含一个 requirements.txt 文件&#xff0c;其中列出了项目运行所需的Python库及其版本信息。该文件用于部署Python项目的运行环境&#xff0c;并管理项目的依赖包&#xff0c;以确…

java set集合相关介绍和方法使用操作

在Java中&#xff0c;Set是一种不允许元素重复的集合&#xff0c;它是基于哈希表实现的。Set接口继承自Collection接口&#xff0c;常见的实现类有HashSet、LinkedHashSet和TreeSet。 HashSet是基于哈希表实现的Set&#xff0c;它不保证元素的顺序&#xff0c;存储和访问速度较…

Codeforces Round 923 (Div. 3)E. Klever Permutation 找规律,有共同区间

Problem - E - Codeforces 目录 Source of idea: 思路&#xff1a; 代码&#xff1a; 另一个up的找规律的解法&#xff1a; Source of idea: Codeforces Round 923(A-F题解) - 哔哩哔哩 (bilibili.com) 思路&#xff1a; 上面up分析的很好。两个相邻区间也就端点不一样&…

nginx限制网段访问

文章目录 nginx限制网段访问介绍:使用:示例:介绍网段:nginx限制网段访问 介绍: Nginx的deny和allow指令是由ngx_http_access_module模块提供, Nginx安装默认内置了该模块 使用: nginx访问控制模块: 想禁止哪个ip访问就加上deny IP, 想允许哪个ip访问就加上allow…

使用Pillow来生成简单的红包封面

Pillow库&#xff08;Python Imaging Library的后继&#xff09;是一个强大而灵活的图像处理库&#xff0c;适用于Python。Pillow 库&#xff08;有时也称 PIL 库&#xff09; 是 Python 图像处理的基础库&#xff0c;它是一个免费开源的第三方库&#xff0c;由一群 Python 社区…

List与数组相互转换

文章目录 将 List 转 数组List.toArra()Stream().toArray() 将 数组 转 ListLists.newArrayList()Stream.of() 将 List 转 数组 List.toArra() List<Integer> list Lists.newArrayList(1, 2, 3);// 无需转换类型 --> [1,2,3]Integer[] intArray list.toArray(new I…

掌握Python爬虫的四大组件之Handler(处理器)

源码分享 https://docs.qq.com/sheet/DUHNQdlRUVUp5Vll2?tabBB08J2 在构建高效的Python爬虫时&#xff0c;理解和应用日志组件是至关重要的。在前一章节中&#xff0c;我们探讨了Logger&#xff08;记录器&#xff09;的概念和基础用法。本章节&#xff0c;我们将聚焦于Logge…

2024年Java架构篇之设计模式

2024年Java实战面试题_java 5 年 面试-CSDN博客 1、单例模式

IAR报错:Error[Pa045]: function “halUartInit“ has no prototype

在IAR工程.c文件末尾添加一个自己的函数&#xff0c;出现了报错Error[Pa045]: function "halUartInit" has no prototype 意思是没有在开头添加函数声明&#xff0c;即void halUartInit(void); 这个问题我们在keil中不会遇到&#xff0c;这是因为IAR编译器规则的一…

已解决java.sql.SQLSyntaxErrorException: Unknown database异常的正确解决方法,亲测有效!!!

已解决java.sql.SQLSyntaxErrorException: Unknown database异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 报错问题解决思路解决方法交流 报错问题 java.sql.SQLSyntaxErrorException: Unknown database 解决思路 对于出现 “java.…