070：vue+leaflet 选择一个marker，点击后设置其为中心点

已于 2024-05-10 21:41:20 修改
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet设置中心 大剑师 leaflet教程 leaflet入门 leaflet自学
于 2023-02-15 18:34:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129048460
该博客由大剑师兰特撰写，介绍如何在Vue与Leaflet结合的项目中，实现点击Marker后将其设置为地图中心并平移。提供了一个包含81行代码的示例，通过引用geojson文件展示Marker，点击特定Marker时执行panTo操作。

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

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

文章目录

一、示例效果

二、示例简介

本示例演示如何在vue+leaflet中引用geojson文件，显示marker，点击某个marker后，设置其为中心点，并panTo到中心点。

直接复制下面的 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 运行即可。

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


/*
* @Author: 大剑师兰特（xiaozhuanla
了解本专栏 订阅专栏 解锁全文
037：vue+leaflet 获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）
大剑师兰特的GIS世界
11-18 1507
第037个本示例的目的是介绍演示如何在vue+leaflet中获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）。
066：vue+leaflet 设置多个marker，导出为一个geojson文件
大剑师兰特的GIS世界
02-15 780
第066个本示例的目的是介绍演示如何在vue+leaflet中使用L.marker设置多个markers， 通过数据重组，导出为geojson文件。这里面是一个很重要的判断条件，可以灵活地去运用。
leaflet定位地图中心
weixin_53545517的博客
09-08 2349
【代码】leaflet定位地图中心。
leaflet将geometry对象设置地图中心
2301_77133858的博客
06-01 540
下面一段是基于surpermap iClient + vue3 做的一个查询组件。
leaflet打点和设置地图中心点（vue）
maohangfei.cn
03-17 2188
【代码】leaflet打点和设置地图中心点（vue）
Leaflet修改地图中心点定位
cuisidong1997的博客
04-22 4312
前景：在操纵地图时除了鼠标、触摸交互移动地图，通过map.panBy和map.panTo也可以移动地图。 map.panTo（平移至中心点）：将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。 map.panBy（通过像素点平移）：通过给定的像素值对地图进行平移。 参考高德地图代码：地图的平移-地图属性-示例中心-JS API 2.0 示例 | 高德地图API ...
leaflet(二)画中心点标记和范围
LovelyLittleCub的博客
10-18 439
leaflet(一)初始化地图。
131：vue+leaflet实现波动的marker效果
大剑师兰特的GIS世界
04-07 1863
第131个本示例的目的是介绍如何在vue+leaflet中显示波动的marker效果。
071：vue+leaflet 设置marker，并可以任意拖动每一个marker
大剑师兰特的GIS世界
02-16 1229
第071个本示例的目的是介绍演示如何在vue+leaflet中通过L.marker来添加marker，通过设置其属性，可以让marker在地图上任意的拖动。
008：vue+leaflet自定义marker图标，每个点设置不同图片
大剑师兰特的GIS世界
09-13 2038
本示例的目的是介绍演示如何在vue+leaflet中添加多个marker，每个marker自定义自己的icon图片，多个marker，多个不同的图片。点击查看本专栏内容目录列表。
63.（leaflet篇）leaflet+turf获取geojson面的中心点与质心.rar
01-10
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/122410542
leafletjs实现动态标记点
04-18
leafletjs实现动态标记点
leafLet地图自适应,需要地图调整合适的缩放等级和中心点，以保证所有元素都显示，类似于高德地图的setFitView()，适用于所有地图。
qq_52619560的博客
08-01 1582
需要地图调整合适的缩放等级和中心点，以保证所有元素都显示其中，类似于高德地图的setFitView()方法，适用于所有地图的自适应放大。
leaflet点击地图改变marker的位置
sinat_38818576的博客
02-27 6276
var marker = L.marker([37.8542800187483, 112.534177962463]).addTo(maprow); maprow.on("click", function(e) { var lat = e.latlng.lat; var lng = e.latlng.lng; marker.setLatLng([lat,lng]); });
LeafletJS-Markers
专注GIS软件开发。
06-03 1347
为了在地图上标记单个位置，传单提供了标记。这些标记使用标准符号，并且可以自定义这些符号。在本章中，我们将看到如何添加标记以及如何自定义，动画化和删除它们。 添加一个简单的标记 要使用Leaflet JavaScript库将标记添加到地图，请遵循以下步骤- 步骤1-通过传递<div>元素（字符串或对象）和地图选项（可选）来创建地图对象。 步骤2-通过传递所需图块的URL创建一个Layer对象。 第3步-使用Map类的addLayer（）方法将图层对象添加到地图。 步骤4-通过传...
【OpenCV 图像基础】2.2图像基本处理：图像几何变换
尊新必威的博客
09-24 1441
1.图像平移 代码： import cv2 import numpy as np img = cv2.imread('img2.png') # 构造移动矩阵H # 在x轴方向移动多少距离，在y轴方向移动多少距离 H = np.float32([[1, 0, 50], [0, 1, 25]]) rows, cols = img.shape[:2] print(img.shape) print(rows, cols) # 注意这里rows和cols需要反置，即先列后行 res = cv2.warpAf.
Leaflet 改变 Marker（标记） 颜色
热门推荐
qq_34922009的博客
07-23 1万+
方案一： 这是谷歌在设计Leaflet Icon时的最佳热门之一，但它没有一个没有第三方的解决方案，我在React中遇到了这个问题，因为我们需要动态颜色来处理路线和图标。 我想出的解决方案是使用Leaflet.DivIcon html属性，它允许您传递一个被评估为DOM元素的字符串。 例如，我创建了一个标记样式如下： const myCustomColour = '#583470' con...
superMap leaflet地图加载中心点偏移，不在容器正中心
follow12138的博客
07-16 667
直接使用leaflet自带的方法invalidateSize()对地图进行重新定位（参考容器位置）加载。说明：使用当前操作必须在地图加载函数执行完成之后，此处使用定时器也是确保地图加载完成。在容器中加载leaflet地图后，出现设置的地图中心点不在容器中心位置，向其他地方发生偏移。排查布局和样式，排除是页面布局和样式的影响，就只能是地图加载时内部的问题。
leaflet讲解:vue中使用leaflet进行地图打点marker事件（2）
weixin_44959182的博客
07-07 6273
哈喽，大家好！忍住了看小说的冲动，今天来继续为大家讲解leaflet。 今天为大家讲解的是leaflet进行打点事件！本次打点适用于任何用leaflet加载的地图，本次还继续用wmts加载的地图为大家讲解。 具体代码如下 <template> <div id="app"> <div id="map" /> </div> </template> <script> export default { data() { re
vue+leaflet 修改popup在点位下方显示
最新发布
11-02
在Vue.js中使用Leaflet库时，如果你想让弹出窗口(Popup)在地图上特定标记(Point)的下方显示，你可以通过设置Popup的位置相对坐标来实现。Leaflet提供了一个`LatLng`对象，可以用来指定相对于地图中心、某个点或者其他位置偏移的经纬度。 以下是修改Vue组件中 popup 的显示位置的基本步骤： 1. 首先，在创建Marker时，同时实例化一个Popup并绑定到Marker上： ```javascript <template> <div> <leaflet :center="mapCenter" :zoom="zoomLevel"> <!-- ... --> <marker v-for="(location, index) in locations" :lat-lng="location.latLng" :key="index"> <popup :content="location.info" :auto-close="false"> <!-- 这里是自定义内容 --> </popup> <!-- ... --> </marker> </leaflet> </div> </template> <script> import L from 'leaflet'; export default { data() { return { mapCenter: [51.505, -0.09], zoomLevel: 13, locations: [ { latLng: [51.5, -0.09], info: 'Location A' }, {/* 更多地点 */} ], }; }, methods: { // 如果需要动态调整popup位置，可以在相应事件触发时更新 updatePopupPosition(popup, marker) { popup.setLatLng({ // 将popup放在marker下方一定偏移量的位置 lat: marker.getLatLng().lat + someOffsetY, lng: marker.getLatLng().lng, }); } }, }; </script> ``` 在这个例子中，`someOffsetY`是一个你需要的垂直偏移值，可以根据需求调整。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值