073：vue+leaflet 双击地图，放大zoom

已于 2024-05-10 21:35:44 修改
阅读量891 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet双击 leaflet放大缩小 leaflet教程 leaflet基础 leaflet入门
于 2023-02-16 13:11:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129059347
本文介绍了如何在 Vue 和 Leaflet 框架中通过监听 `dblclick` 事件来实现地图双击放大功能。作者提供了一个包含67行代码的示例，只需简单复制并运行即可体验效果。示例中使用了 `map.getZoom()` 方法来获取当前地图的缩放级别。

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 073个示例

文章目录

一、示例效果

二、示例简介

本示例演示如何在vue+leaflet中双击地图，放大zoom。 这里面用到了dblclick这个鼠标事件的方法，同时用了map.getZoom() 这个方法。

直接复制下面的 vue+leaflet源代码，操作2分钟即可运行实现效果

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/4190537826
或者同样查看：https://blog.youkuaiyun.com/cuclife/article/details/126745283
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

四、示例源代码（共67行）


/*
* @Author: 大剑师兰特（xi
了解本专栏 订阅专栏 解锁全文
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3854
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
leaflet加载接入百度地图（leaflet篇.2）
地图之家
05-14 7970
完整代码文件在文章末尾处提供 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <!-- L
leaflet加载百度地图
热门推荐
Jack的世界
10-18 1万+
leaflet加载百度地图 由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样，所以大多数的文章介绍了如何加载例如：天地图，高德地图，腾讯地图等地图，但是唯独百度地图的介绍的不多也有一些感觉是不太合适的，我从这篇文章了解到了他的一些切片规则，然后决定将百度地图拓展出来，给需要他的人使用。 首先需要一些第三方的插件坐标系拓展首先我使用了这个玩意儿。这里需要注意的是，如果你使用的是0.7版
Leaflet加载百度地图
吴道简的博客
04-13 2327
为了验证一下百度地图的影像、矢量、注记等瓦片数据是否是坐标统一的，写了一个简单的leaflet加载百度影像瓦片、矢量瓦片、注记瓦片的页面，叠加在一起，看了一下，果然坐标系是统一的。 <!DOCTYPE html> <html> <head> <title>加载百度地图</title> <meta charset="utf-8"> <style type="text/css"&...
010：vue+leaflet鼠标点击事件click和dblclick，并解决两者冲突问题
大剑师兰特的GIS世界
09-13 1637
本示例的目的是介绍演示如何在vue+leaflet中给marker添加鼠标事件，这里用到了click和dblclick。在双击marker时，会执行两次单击函数和一次双击函数，这就是冲突，解决办法是添加一个定时器，在单击事件函数里通过定时器控制延迟执行。单击事件函数和双击事件函数里都先清除定时器。点击查看本专栏内容目录列表。
vue中使用leaflet地图
weixin_48623317的博客
03-12 9220
vue中使用leaflet地图 根据项目需要学习GIS地图 文章目录vue中使用leaflet地图前言一、引入leaflet地图及插件二、封装创建地图方法1.创建一个文件夹map在文件夹下创建js文件map.js![在这里插入图片描述](https://img-blog.csdnimg.cn/20210312153035715.jpg)2.封装创建地图实例方法3.实现leaflet地图4.leaflet地图展示总结 前言 GIS地图学习 一、引入leaflet地图及插件 npm导入leafle
【天地图】VUE3基于Leaflet.js部分功能hooks封装useLeafletMap.js
YueMiaoL的博客
07-30 1824
起因是为解决天地图渲染十万条数据卡顿问题，自从用了leaflet渲染后就没那么折腾了，使用canvas矢量图层绘制这加载速度也就解决了，心情也舒畅了~除了查leaflet相关攻略大部分都是收费一说，难顶。1.论开发地图自定义绘制工具：leaflet依赖第三方插件，插件暂时感觉没天地图灵活（待我再研究研究），天地图只需按管网API开发既是。7.论开发出现问题寻求解决方案：就绿色上网来说，leaflet更多搜的是付费方案，天地图有些搜不太到，两者体感就大差不差了。
vue3 + leaflet@1.94---初始化地图
最新发布
QDxin_xyz的博客
01-18 256
【代码】vue3+leaflet@1.94---初始化地图。
leaflet加载百度地图底图
08-11
融合leaflet和百度地图底图
leaflet加载百度地图和其他网络在线地图
08-23
leaflet加载百度地图和其他网络在线地图，包含百度的瓦片、影像以及道路交通实况服务，测试，百度坐标数据无需转换，直接根据经纬度可以显示在正确位置。
leaflet 加载百度自定义地图
12-01
leaflet 加载百度自定义地图，支持自定义百度地图样式
leaflet加载百度地图(矫正版)
12-20
http://blog.youkuaiyun.com/u012087400/article/details/53744756
leaflet加载百度、高德、谷歌、天地图等在线地图
03-26
leaflet加载百度、高德、谷歌、天地图等在线地图
使用Leaflet绘制带箭头的轨迹线
ByteZenith的博客
09-02 1857
通过使用Leaflet提供的polyline和arrowheads功能，我们可以方便地在地图上展示带箭头的轨迹线，从而更好地表示轨迹的运动方向。最后，使用L.polyline()创建了一个轨迹线实例，并通过arrowheads选项设置了箭头的样式和频率。在实际应用中，你可以根据需要对轨迹线的样式进行进一步的定制，例如设置箭头的颜色、粗细，调整箭头的大小和显示频率等。上述代码中，首先使用L.map()创建了一个新的地图实例，并通过setView()方法设置了地图的中心位置和缩放级别。
Leaflet加载GeoJSON数据，并添加到FeatureGroup
LbJ_MVP的博客
08-24 6837
Vue地图项目，加载 GeoJSON数据，并添加到定义好的 FeatureGroup 上；L.GeoJSON解析。
leaflet加载geoJSON格式的点，线，面图层
qq_38436431的博客
12-15 1790
PS： 为了简洁易懂，代码做了简化不能直接运行！
Leaflet地图加载百度底图
lihefei_coder的博客
08-11 1087
源代码 <!DOCTYPE html> <html style="padding:0;margin:0;"> <head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css"> <script src="http.
vue+leaflet+地图瓦片
12-22
Vue.js 和 Leaflet 结合可以创建动态的地图应用。Leaflet 是一个轻量级的 JavaScript 地图库，适合用于前端开发，而 Vue 是一款强大的渐进式框架，能够帮助管理组件状态和视图。 在 Vue + Leaflet 的组合中，你可以这样做： 1. **安装依赖**：首先，在 Vue 项目中安装 Leaflet 相关的依赖，比如 `@vue/leaflet` 或者 `vue2-leaflet` 等插件。 ```bash npm install @vue/leaflet ``` 2. **设置配置**：在 Vue 组件中，引入并配置 Leaflet，通常会通过 `import L from 'leaflet'` 和在选项里添加 `L.vue`。 3. **创建地图**：在模板部分 `<template>` 中，使用 Leaflet 的 API 创建一个新的地图实例，并设置其容器元素。 ```html <div id="map" :style="{ height: '500px' }"></div> ``` 4. **绑定数据**：在 `<script>` 部分，通过计算属性或 watch 对象来绑定地图数据到 Leaflet 上，例如设置中心点、缩放级别等。 5. **添加交互功能**：利用 Leaflet 提供的各种标记、路径、事件等功能，根据需求添加交互元素，如点击图标显示信息、拖拽标记等。 ```javascript <template> <div> <LMap :center="mapCenter" :zoom="mapZoom"> <!-- 添加地图元素 --> </LMap> </div> </template> <script> export default { data() { return { mapCenter: [51.505, -0.09], mapZoom: 13, }; }, components: { LMap: { // 使用自定义渲染函数，或者直接使用内置的 Vue2Leaflet 组件 } }, }; </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值