JosephCrowell / wn-leafletmap-plugin
Winter CMS 的 Leaflet 地图插件
Requires
- php: >=7.0
- composer/installers: ~1.0
- winter/wn-translate-plugin: ^2.0
This package is auto-updated.
Last update: 2024-09-07 09:59:36 UTC
README
使用 Leaflet.js 和 OpenStreet Maps 显示带有标记位置的地图的简单插件。
对于那些不想或不能使用 Google Maps 或其他商业产品的用户来说，这是一个替代方案。
您可以设置地图中心、缩放级别、在屏幕上指定标记位置并设置标记弹窗文本。您还可以通过滚动行为禁用或启用缩放，例如，要使用全宽地图而不中断页面滚动。
功能有限，但允许您快速将带有标记的地图添加到任何页面。对于大多数用例，这应该足够。
特性
- 使用 CDN 上的最新 Leaflet
- 您可以自定义地图中心、缩放、标记位置和标记弹窗文本
- 目前只能有一个标记
- 缩放控件、通过滚动缩放可以在点击地图之前禁用
安装
直接从 Composer 安装插件
在 Winter CMS 根目录中输入 composer require josephcrowell/wn-leafletmap-plugin，Composer 将安装插件
直接从 Github 下载插件
将其解压到 plugins/josephcrowell/leafletmap 目录中。注销并登录到后端，现在插件应该已安装。
配置
LeafletMap 组件设置
- 纬度和经度 - 用逗号分隔的地图中心坐标，例如 50.002, -0.09。查看“获取 OSM 坐标”章节了解如何查找您的坐标。
- 缩放 – 初始地图缩放级别。应为一个数字。
- 标记纬度和经度 – 与地图中心坐标相同的格式。如果此字段为空，则不会显示标记。
- 标记文本 – 将在弹窗中显示的简短描述（当点击标记时）。例如，可以是地址。
- 滚动保护 – 允许您控制缩放行为。默认情况下，通过滚动/鼠标滚轮的缩放功能在访客点击地图之前被禁用。
- 宽度和高度 - 设置地图容器元素的宽度和高度
使用方法
将组件添加到您的页面并配置它。按照以下代码将组件添加到页面中
{% component 'LeafletMap' %}
leafletmap div 需要定义高度。此高度必须是有效的 CSS，默认设置为 500px。要更改此值，请编辑高度组件选项。
获取 OSM 坐标和缩放设置
要查找您的坐标和所需的缩放级别，请转到 OSM 页面，在地图上找到所需位置（使用搜索或仅通过鼠标移动）。双击地图上的所需位置。地图将自动居中在所选位置。通过鼠标滚动设置所需的缩放级别。当一切设置好后，点击屏幕右侧的“共享”图标。在 Geo URI 中检查此字符串
geo:41.6591,-4.7287?z=15
将选定的数字粘贴到组件设置中。?z=15定义了缩放级别（示例中的值为15）。或者，您也可以查看浏览器上的链接栏。
map=15/41.6591/-4.7287
联系方式
如果您有任何问题，请随时提出！
您可以通过以下方式联系我们：