esadewater/livewire-maps

Laravel Livewire-Maps

维护者

详细信息

github.com/esadewater/livewire-maps

主页

源代码

问题

安装: 156

依赖: 0

建议者: 0

安全: 0

星标: 16

关注者: 3

分支: 2

开放问题: 5

语言:JavaScript

dev-main 2023-01-09 06:25 UTC

Requires

Requires (Dev)

MIT 70382894f96fbf2678370048ce8370176a0fc9a5

  • Erik Sadewater <erik.woop@sadewater.com>

mapslaravellivewirelivewire-componentesadewaterlivewire-maps

This package is auto-updated.

Last update: 2024-09-19 23:30:19 UTC

README

⚠️ ALPHA状态：此项目仍处于早期开发阶段。它尚未准备好用于生产使用。进一步的开发将推迟到Livewire v3发布。

Livewire-Maps

为Laravel-Livewire提供的Google Maps基本实现，目前支持

示例

您可以在以下位置找到示例： esadewater/livewire-maps-sample

安装

您可以通过composer安装此包

composer require esadewater/livewire-maps

安装地图标记npm包

npm install @googlemaps/markerclusterer

然后在您的app.js中包含JavaScript资源

import {init} from "../../vendor/esadewater/livewire-maps/resources/js/LiveWireMaps";
init();

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="livewire-maps-config"

您可以使用以下命令发布视图

php artisan vendor:publish --tag="livewire-maps-views"

用法

从这里获取Google Maps平台的API密钥，并将其添加到您的.env文件中

GOOGLE_MAPS_API_KEY=YOUR_KEY_GOES_HERE

在@livewireScripts之后立即添加@livewireMapsScripts指令和您的app.js

<script src="/js/app.js"></script>
@livewireScripts
@livewireMapsScripts

然后，您就可以使用中心点和缩放开始使用基本地图了

<livewire:map-view center-lat="52.004021" center-lng="7.710472" zoom="3" style="100vh" />

## Credits

- [Erik Sadewater](https://github.com/esadewater)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.