OpenStreetMap + Leaflet 搜索邮编/经纬度/地址 标记地图

最新推荐文章于 2024-09-13 22:52:37 发布
最新推荐文章于 2024-09-13 22:52:37 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： web Leaflet OpenStreetMap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LittleFiveSmile/article/details/101389469
版权
本文介绍了如何使用leaflet-opencage-search库，在OpenStreetMap上进行邮编、经纬度和地址搜索，并在地图上显示标记。通过在HTML和JavaScript中添加必要的代码，实现了地图点击更新标记的功能。遇到的问题是无法直接获取模块内的marker，解决方案是设置全局变量并重写添加marker的方法，从而实现在每次搜索后仅更新marker的位置。
摘要由CSDN通过智能技术生成

必须写一篇纪念一下我呕心沥血的几小时。

之前用 leaflet-control-geocoder 实现了一个

这次我用 leaflet-opencage-search

通过搜索，它会直接在地图上加一个蓝色Marker

使用方法如下：

首先在html的<head>里面添加：

 <!--  leaflet-->
<script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css"/>

 <!--  OpenCageData-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/opencagedata/leaflet-opencage-search@d4cbd36122efc8d17152b4177ed0e12165305441/dist/css/L.Control.OpenCageData.Search.min.css" />
<script src="https://cdn.jsdelivr.net/gh/opencagedata/leaflet-op
最低0.47元/天 解锁文章
LittleFiveSmile
关注
专栏目录
leaflet-geosearch:地理编码地址查找库，支持各种api提供程序
05-01
Leaflet.GeoSearch 演示和文档： 安装 更多文档@ 使用npm： npm install --save leaflet-geosearch 或纱线： yarn add leaflet-geosearch 浏览器支持/ Polyfills 更多文档@ 该库是在考虑最新技术的情况下编写的。 因此，当您希望支持较旧的浏览器时，需要包括一些polyfill。 建议将这些polyfill用于IE和Safari支持： array.includes ，用于array.includes支持。 ，用于fetch请求。 关于 该库为您的（网络）应用程序添加了对地址编码（地址查找，也称为地理搜索）的支持。 它带有嵌入在地图中的控件。 查看了解各种可能性。 该库使用所谓的“提供程序”来构建正确的服务URL，并将检索到的数据解析为统一格式。 由于有了这种体系结构，添加您
基于leaflet的地图功能开发合集十大功能（热力图、Geojson轨迹、marker、动画、用户标记侧栏、测量工具、经纬度显示、搜索框）
popofzk的博客
10-02 3603
Leaflet十大常用功能合集         本篇文章主要介绍基于leaflet开源地图组件开发的地图搭建，包含热力图、Geojson轨迹、marker、动画、用户标记侧栏、测量工具、搜索框、经纬线显示等功能。         本文中的代码都是经过测试无误的，关于依赖包均可在github上找到源文件，主要就是依赖导入和函数调用两部分，为了简洁，json数据一般外部导入
Leaflet-Search 项目安装和配置指南
最新发布
gitblog_07478的博客
09-13 440
Leaflet-Search 项目安装和配置指南 leaflet-search Search stuff in a Leaflet map 项目地址: https://gitcode.com/gh_mirrors/le/leafl...
vue.js 和后台交互_使用vue js和传单创建交互式位置选择器
weixin_26736149的博客
09-18 186
vue.js 和后台交互Interactive maps are good for displaying geographic information. But we can also use them to get location data from users. This comes in handy if we are building location-based application...
leaflet常用功能整理知识总结
热门推荐
孙霸天的专栏
09-03 1万+
最近一直在和leaflet打交道，就总结一下leaflet常用的功能和插件供自己参考。 等我把手头的项目完成，我会把我的代码整理好上传供大家参考交流。 一、常用插件 1.地图底图切换 https://github.com/htoooth/Leaflet.ChineseTmsProviders 2.切片地图加载(wmts,支持矢量切片) https://github.com/mylen/...
131：vue+leaflet实现波动的marker效果
大剑师兰特的GIS世界
04-07 1409
第131个本示例的目的是介绍如何在vue+leaflet中显示波动的marker效果。
leaflet 获取经纬度.rar
08-20
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(map); ``` 5. **监听点击事件**：通过`.on`方法监听地图的“click”事件，当事件触发时...
Leaflet_OpenStreetMap_Example:这是一个示例项目，用于实践传单和openstreetmap的组合以进行映射
03-10
在本项目"Leaflet_OpenStreetMap_Example"中，我们将探讨如何使用Leaflet库与OpenStreetMap服务结合，创建交互式、自定义的地图应用。这是一个非常实用的技术，尤其对于那些需要在网页上展示地理位置信息的开发者来...
48.（leaflet篇）leaflet实现正向匹配查询（输入中文关键字查询地址信息）.zip
11-04
在本教程中，我们将深入探讨如何使用Leaflet库在JavaScript中实现正向匹配查询，即通过输入中文关键字来查询地图上的地址信息。Leaflet是一款轻量级、高性能且易用的开源JavaScript库，广泛用于创建交互式地图。下面...
49.（leaflet篇）leaflet实现反向匹配查询（输入坐标查询距离最近的地址信息）.zip
11-05
在本教程中，我们将深入探讨如何使用Leaflet库来实现反向地理...这通常通过调用外部API来完成，如谷歌地图API、OpenStreetMap的Nominatim服务或高德地图API。以Nominatim为例，它的反向地理编码API URL格式为： ``` ...
基于OpenStreetMap的地图初步实现
01-10
本话题主要探讨的是如何基于开源项目OpenStreetMap（OSM）来实现一个基础的地图应用。OpenStreetMap是一个全球性的开放地理数据项目，允许用户免费获取和使用地理数据，包括道路、建筑物、交通设施等。 首先，我们...
leaflet-geosearch, Leaflet geosearching/地理编码控制.zip
09-18
leaflet-geosearch, Leaflet geosearching/地理编码控制 Leaflet.GeoSearch 安装使用 npm:npm install --save leaflet-geosearch或者纱线：yarn add leaflet-geosearch或
leaflet-search:在传单地图中搜索内容
04-14
传单控制搜索 一个Leaflet控件，用于通过自定义属性搜索标记/功能的位置。 支持ajax / jsonp自动补全和JSON数据过滤/重新映射。 根据MIT许可获得许可。 版权所有 在Leaflet 0.7.x和1.3.x中进行了测试 在哪里 演示： 源代码： 安装 npm install --save leaflet-search 选项 选项 默认 描述 网址 '' 通过ajax请求进行搜索的网址，例如：“ search.php？q = {s}”。 可以用作返回字符串以进行动态参数设置的函数 层 空值 搜索标记所在的图层（是L.LayerGroup） sourceData 空值 函数填充_recordsCache，通过第一个参数传递搜索文本，然后在第二个回调中传递 jsonpParam 空值 用于通过jsonp服务搜索的jsonp参数名称，例如：“回调” prop
leaflet使用插件汇总
cyril_96的博客
08-23 1139
插件leaflet-minimap。
Leaflet中使用leaflet-search插件实现搜索定位效果
BADAO_LIUMANG_QIZHI的博客
01-11 4024
场景 Leaflet快速入门与加载OSM显示地图： Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上，怎样使用插件实现搜索定位效果如下 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、插件地址 https://github.com/stefanocudin
Leaflet地图实现定位搜索
m0_65720832的博客
07-30 2508
我用的是天地图里的api，因为是使用leaflet框架混合天地图开发的，功能也不是特别完善，也不是最优方案，有机会学习一下leaflet框架中定位搜索的api。地图搜索分为五级吧在我理解中，最后两个没搞，感觉用处不大并且费事，先实现最基本的功能。...
探索地理世界的强大工具：Leaflet.GeoSearch
gitblog_00098的博客
05-09 446
探索地理世界的强大工具：Leaflet.GeoSearch leaflet-geosearchA geocoding/address-lookup library supporting various api providers.项目地址:https://gitcode.com/gh_mirrors/le/leaflet-geosearch Leaflet.GeoSearch 是一款强大的开源插...
Vue渲染Leaflet GIS地图，边界线，点位组件
Junyaxx的博客
10-22 1079
package.json中引入并安装： "leaflet": "~1.4.0", "vue2-leaflet": "^2.5.2" 组件写法： <template> <div class="vue-leaflet"> <l-map style="width: 100%; height: 100%" :zoom="map.zoom" :center="map.center" :min-zoom="map....
121：leaflet多功能集成（位置、搜索、切换地图、全屏、鹰眼等）
大剑师兰特的GIS世界
03-26 1433
第121个本示例的目的是介绍演示如何在vue+leaflet中使用插件做功能集成，里面包括位置、搜索、切换地图、全屏、鹰眼等。
vue2+leaflet 获取本地经纬度
06-10
要在Vue2中使用Leaflet获取本地经纬度，你需要使用HTML5的Geolocation API。以下是一个简单的Vue2组件代码示例，它使用Leaflet和Geolocation API获取用户的当前位置并在地图上标记它： ```html <template> <div id="map"></div> </template> <script> import L from 'leaflet'; export default { name: 'Map', data() { return { map: null, marker: null, zoom: 15 }; }, mounted() { // 初始化地图 this.map = L.map('map').setView([0, 0], this.zoom); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(this.map); // 获取当前位置 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(position => { const { latitude, longitude } = position.coords; const coords = [latitude, longitude]; // 在地图上标记当前位置 this.marker = L.marker(coords).addTo(this.map); this.map.setView(coords, this.zoom); }, error => { console.log(error); }); } else { console.log('Geolocation is not supported by this browser.'); } } }; </script> <style> #map { height: 400px; } </style> ``` 这将在Vue2中创建一个名为“Map”的组件，它将在其挂载时使用Leaflet创建一个地图，并使用Geolocation API获取用户的当前位置。如果用户允许访问其位置，则在地图上显示标记以标记其位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值