README

此包允许您轻松地在 Laravel 项目中使用 leaflet.js 或 Google Maps 创建地图。

安装

您可以通过 composer 安装此包

composer require larswiegers/laravel-maps

如果您想自定义地图视图，则可以发布视图

php artisan vendor:publish --provider="Larswiegers\LaravelMaps\LaravelMapsServiceProvider"

支持的地图类型

瓦片服务器

Openstreetmap

Openstreetmap 是一个由志愿者创建的创意共享瓦片库。无需配置即可使用，因为它是该库的默认瓦片服务器。更多信息请访问：openstreetmap.org

Mapbox

Mapbox 是一家盈利公司，同时也提供免费密钥。他们的地图可以更精确。要获取免费密钥，请访问 mapbox.com 登录后，您可以通过将免费密钥放在 env 文件中（如 MAPS_MAPBOX_ACCESS_TOKEN）来使用它。

归属

Mapbox 要求您在使用他们的瓦片服务器时提供归属。更多信息请参阅：https://docs.mapbox.com/help/getting-started/attribution/ 如果您使用 mapbox，我们将提供默认值。但如果你想自定义它，可以通过归属属性传递文本。例如：

<x-maps-leaflet 
    :attribution="Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>">
</x-maps-leaflet>

用法

Leaflet

// Leaflet
// A basic map is as easy as using the x blade component.

<x-maps-leaflet></x-maps-leaflet>

// Set the centerpoint of the map:
<x-maps-leaflet :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-leaflet>

// Set a zoomlevel:
<x-maps-leaflet :zoomLevel="6"></x-maps-leaflet>

// Set markers on the map:
<x-maps-leaflet :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-leaflet>

请注意，如果您想在同一页面上使用多个地图，您需要为每个地图指定一个 id。

Leaflet 版本

默认情况下，我们使用最新的 leaflet 版本，但如果您想使用不同的版本，只需通过参数传递即可

// Set leafletVersion to desired version:
<x-maps-leaflet leafletVersion='1.9.4'></x-maps-leaflet>

Google Maps

// Google Maps

// Set the centerpoint of the map:
<x-maps-google :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-google>

// Set a zoomlevel:
<x-maps-google :zoomLevel="6"></x-maps-google>

// Set type of the map (roadmap, satellite, hybrid, terrain):
<x-maps-google :mapType="'hybrid'"></x-maps-google>

// Set markers on the map:
<x-maps-google :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-google>

// You can customize the title for each markers:
<x-maps-google :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091, 'title' => 'Your Title']]"></x-maps-google>

// Automatically adjust the map's view during initialization to encompass all markers:
<x-maps-google
    :markers="[
        ['lat' => 46.056946, 'long' => 14.505752],
        ['lat' => 41.902782, 'long' => 12.496365]
    ]"            
    :fitToBounds="true"
></x-maps-google>

// Position the map's center at the geometric midpoint of all markers:
<x-maps-google
    :markers="[
        ['lat' => 46.056946, 'long' => 14.505752],
        ['lat' => 41.902782, 'long' => 12.496365]
    ]"            
    :centerToBoundsCenter="true"
    :zoomLevel="7"
></x-maps-google>

Google 地图 API 密钥

您可以从这里获取 API 密钥： 创建 API 密钥，并在控制台中启用 Maps JavaScript API。将 API 密钥放置在 env 文件中，如 MAPS_GOOGLE_MAPS_ACCESS_TOKEN。

注意事项

双引号需要转义，即添加一个反斜杠后跟双引号 (/")

在 livewire 中的用法

此库不支持开箱即用的 livewire，但一些用户已经找到了一种解决方案。请参阅此问题以获取更多信息：#34

如果您有时间，请随意 PR 一个 livewire 组件。

测试

要运行测试，请使用以下组件

composer test

测试是通过渲染 blade 组件并对输出的 HTML 进行断言来完成的。虽然这对于初始测试很好，但它缺乏一些确定性。将来可能需要浏览器测试来进一步确保代码按预期工作。

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

贡献

有关详细信息，请参阅 CONTRIBUTING

安全性

如果您发现任何与安全相关的问题，请通过电子邮件联系 larswiegers@live.nl，而不是使用问题跟踪器。

鸣谢

• Lars Wiegers
• 所有贡献者

许可协议

MIT 许可协议 (MIT)。有关更多信息，请参阅 许可文件。