当前位置: 首页 > news >正文

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>

相关文章:

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

vue百度地图的使用 第一步&#xff1a;安装插件第二步&#xff1a;main.js中引用第三步&#xff1a;页面中使用 第一步&#xff1a;安装插件 npm install vue-baidu-map --save第二步&#xff1a;main.js中引用 // 百度地图 import BaiduMap from vue-baidu-map Vue.use(Baid…...

搜索+哈希/平衡树,LeetCode 987. 二叉树的垂序遍历

目录 一、题目 1、题目描述 2、接口描述 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 给你二叉树的根结点 root &#xff0c;请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言&#xff0c;其左右子结…...

蓝桥杯每日一题之内存问题

蓝桥杯真题---内存问题 题目描述&#xff1a; 小蓝最近总喜欢计算自己的代码中定义的变量占用了多少内存空间。 为了简化问题&#xff0c;变量的类型只有以下三种&#xff1a; int&#xff1a;整型变量&#xff0c;一个 int 型变量占用 4 Byte 的内存空间。 long&#xff…...

Django前后端分离之后端实践2

小实践&#xff1a;实现用户登录、注销及ORM管理功能、事务开启小实践 models.py class Books(models.Model):id models.CharField(primary_keyTrue,max_length20,verbose_name"图书ID")name models.CharField(max_length20,verbose_name图书名称)status models…...

windowsserver 2016 PostgreSQL9.6.3-2升级解决其安全漏洞问题

PostgreSQL 身份验证绕过漏洞(CVE-2017-7546) PostgreSQL 输入验证错误漏洞(CVE-2019-10211) PostgreSQL adminpack扩展安全漏洞(CVE-2018-1115) PostgreSQL 输入验证错误漏洞(CVE-2021-32027) PostgreSQL SQL注入漏洞(CVE-2019-10208) PostgreSQL 安全漏洞(CVE-2018-1058) …...

Java实现免税店商城管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.2 研究方法 三、系统展示四、核心代码4.1 查询免税种类4.2 查询物品档案4.3 新增顾客4.4 新增消费记录4.5 审核免税 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的免税店商城管理系…...

【Linux】信号

祝大家新年快乐啦&#xff01;&#xff01;&#xff01;新的一年&#xff0c;第一篇文章我们来谈谈Linux中的信号 目录 一、引入 二、系统内置的信号 三、前台进程和后台进程 四、signal函数 五、信号的产生 5.1 通过终端按键产生信号 5.2 调用系统函数向进程发信号 5…...

[NISACTF 2022]easyssrf

它提示我们输入 那我们输入file:///flag file:// 访问本地文件系统 它提醒我们输file:///fl4g 它提醒我们输ha1x1ux1u.php 看到代码stristr($file, “file”)当我们输入file它会提示我们输了 啥意思可以前面加个/ 也可以通过read读取 思路都是前面加/不等于flag绕过 filephp://…...

在Linux系统中设置全局HTTP代理的步骤与技巧

在Linux系统中&#xff0c;设置全局HTTP代理可以方便我们统一管理和控制网络请求。这不仅可以帮助我们加速网络访问&#xff0c;还可以在某些情况下绕过网络限制或实现匿名上网。下面&#xff0c;我将为你详细介绍在Linux系统中设置全局HTTP代理的步骤与技巧。 步骤一&#xf…...

即席查询框架怎么选?

怎么理解即席查询 即席查询&#xff08;Ad Hoc&#xff09;是用户根据自己的需求&#xff0c;灵活的选择查询条件&#xff0c;系统能够根据用户的选择生成相应的统计报表。即席查询与普通应用查询最大的不同是普通的应用查询是定制开发的&#xff0c;而即席查询是由用户自定义查…...

【C语言】实现双向链表

目录 &#xff08;一&#xff09;头文件 &#xff08;二&#xff09; 功能实现 &#xff08;1&#xff09;初始化 &#xff08;2&#xff09;打印链表 &#xff08;3&#xff09; 头插与头删 &#xff08;4&#xff09;尾插与尾删 &#xff08;5&#xff09;指定位置之后…...

Python操作MySQL基础

除了使用图形化工具以外&#xff0c;我们也可以使用编程语言来执行SQL从而操作数据库。在Python中&#xff0c;使用第三方库: pymysql来完成对MySQL数据库的操作。 安装第三方库pymysql 使用命令行,进入cmd&#xff0c;输入命令pip install pymysql. 创建到MySQL的数据库连接…...

【数学建模】【2024年】【第40届】【MCM/ICM】【E题 财产保险的可持续性】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 2024 ICM Problem E: Sustainability of Property Insurance Extreme-weather events are becoming a crisis for property owners and insurers. The world has endured “more than $1 trillion in damages from more than …...

SpringCloud--Eureka注册中心服务搭建注册以及服务发现

注意springboot以及springcloud版本&#xff0c;可能有莫名其妙的错误&#xff0c;这里使用的是springboot-2.6.13&#xff0c;springcloud-2021.0.5 一&#xff0c;Eureka-Server搭建&#xff1a; 1.创建项目&#xff1a;引入依赖 <dependency><groupId>org.sp…...

ansible shell模块 可以用来使用shell 命令 支持管道符 shell 模块和 command 模块的区别

这里写目录标题 说明shell模块用法shell 模块和 command 模块的区别 说明 shell模块可以在远程主机上调用shell解释器运行命令&#xff0c;支持shell的各种功能&#xff0c;例如管道等 shell模块用法 ansible slave -m shell -a cat /etc/passwd | grep root # 可以使用管道…...

qss的使用

参考&#xff1a;qss样式表笔记大全(二)&#xff1a;可设置样式的窗口部件列表&#xff08;上&#xff09;&#xff08;持续更新示例&#xff09;_51CTO博客_qss样式...

archlinux 使用 electron-ssr 代理 socks5

提前下载好 pacman 包 https://github.com/shadowsocksrr/electron-ssr/releases/download/v0.2.7/electron-ssr-0.2.7.pacman 首先要有 yay 和 aur 源&#xff0c;这个可以参考我之前的博客 虚拟机内使用 archinstall 安装 arch linux 2024.01.01 安装依赖 yay 安装的&#…...

macos安装local模式spark

文章目录 配置说明安装hadoop安装Spark测试安装成功 配置说明 Scala - 3.18 Spark - 3.5.0 Hadoop - 3.3.6 安装hadoop 从这里下载相应版本的hadoop下载后解压&#xff0c;配置系统环境变量 > sudo vim /etc/profile添加以下两行 export HADOOP_HOME/Users/collinsliu/…...

机器学习算法之支持向量机(SVM)

SVM恐怕大家即使不熟悉&#xff0c;也听说过这个大名吧&#xff0c;这一节我们就介绍这相爱相杀一段内容。 前言&#xff1a;在介绍一个新内容之SVM前&#xff0c;我们不觉映入眼帘的问题是为什么要引入SVM&#xff1f;吃的香&#xff0c;睡的着的情况下&#xff0c;肯定不会是…...

线性判别分析(LDA)

一、说明 LDA 是一种监督降维和分类技术。其主要目的是查找最能分隔数据集中两个或多个类的特征的线性组合。LDA 的主要目标是找到一个较低维度的子空间&#xff0c;该子空间可以最大限度地区分不同类别&#xff0c;同时保留与歧视相关的信息。 LDA 是受监督的&#xff0c;这意…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...