README

使用此包，您可以在网站上轻松显示地图。

支持的地图服务

谷歌地图
开放街图
必应地图
MapQuest
雅虎地图
MapKit (beta)

注意：Yandex Maps API 在 Chrome 中无法工作。

特性

安装

此包可以通过 Composer 安装。

composer require gonoware/laravel-maps

使用以下命令之一将编译的资产发布到 public/vendor/maps

php artisan vendor:publish --tag=maps

php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=public

更新时，使用 --force 开关覆盖现有资产

php artisan vendor:publish --tag=maps --force

可选地，您还可以使用此命令将此包的配置文件发布到 config/vendor/maps.php

php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=config

使用方法

通过在 Blade 模板的 </head> 关闭标签之前添加以下指令来加载地图样式。

@mapstyles

然后，在 Blade 模板的 </body> 关闭标签之前添加以下指令，以加载地图脚本。

@mapscripts

基本地图

通过在 Blade 模板中添加 @map 指令来显示地图。

@map([
    'lat' => 48.134664,
    'lng' => 11.555220,
    'zoom' => 6,
])

带标记的地图

您还可以显示标记/图钉/注释

@map([
    'lat' => 48.134664,
    'lng' => 11.555220,
    'zoom' => 6,
    'markers' => [
        [
            'title' => 'Go NoWare',
            'lat' => 48.134664,
            'lng' => 11.555220,
        ],
    ],
])

标记链接

当标记被点击时打开一个 URL。

@map([
    'lat' => 48.134664,
    'lng' => 11.555220,
    'zoom' => 6,
    'markers' => [
        [
            'title' => 'Go NoWare',
            'lat' => 48.134664,
            'lng' => 11.555220,
            'url' => 'https://gonoware.com',
        ],
    ],
])

标记弹出

当标记被点击时显示一个弹出窗口。 popup 属性可以包含 HTML 标记。

@map([
    'lat' => 48.134664,
    'lng' => 11.555220,
    'zoom' => 6,
    'markers' => [
        [
            'title' => 'Go NoWare',
            'lat' => 48.134664,
            'lng' => 11.555220,
            'popup' => '<h3>Details</h3><p>Click <a href="https://gonoware.com">here</a>.</p>',
        ],
    ],
])

自定义标记图标

显示自定义标记图标。支持绝对和相对 URL。

@map([
    'lat' => 48.134664,
    'lng' => 11.555220,
    'zoom' => 6,
    'markers' => [
        [
            'title' => 'Go NoWare',
            'lat' => 48.134664,
            'lng' => 11.555220,
            'url' => 'https://gonoware.com',
            'icon' => 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
        ],
    ],
])

此外，您还可以指定图标图像大小和像素中的锚点。图像将对齐，使图标的尖端位于标记的地理位置。

@map([
    'lat' => 48.134664,
    'lng' => 11.555220,
    'zoom' => 6,
    'markers' => [
        [
            'title' => 'Go NoWare',
            'lat' => 48.134664,
            'lng' => 11.555220,
            'url' => 'https://gonoware.com',
            'icon' => 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
            'icon_size' => [20, 32],
            'icon_anchor' => [0, 32],
        ],
    ],
])

样式

使用 CSS 调整地图的高度

.gnw-map-service {
    height: 750px;
}

更改地图容器的背景

.gnw-map-service__osm {
    background: rgb(221, 221, 221);
}

默认情况下使用 Bootstrap 3.3.7 或 4+ 淡入。要复制或修改动画，请使用以下 CSS

.gnw-map.fade {
    transition: opacity .15s linear;
}
.gnw-map.fade:not(.show) {
    opacity: 0;
}

事件

地图初始化

当地图及其标记初始化时，将触发事件 LaravelMaps:MapInitialized。可以通过事件详细信息访问 DOM 元素、地图、标记和服务名称。

window.addEventListener('LaravelMaps:MapInitialized', function (event) {
   var element = event.detail.element;
   var map = event.detail.map;
   var markers = event.detail.markers;
   var service = event.detail.service;
   console.log('map initialized', element, map, markers, service);
});

请参阅相应的文档以获取高级定制的详细信息

标记点击

当标记被点击时，将触发事件 LaravelMaps:MarkerClicked。可以通过事件详细信息访问 DOM 元素、地图、标记和服务名称。

window.addEventListener('LaravelMaps:MarkerClicked', function (event) {
    var element = event.detail.element;
    var map = event.detail.map;
    var marker = event.detail.marker;
    var service = event.detail.service;
    console.log('marker clicked', element, map, marker, service);
});

变更日志

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

贡献

请参阅 CONTRIBUTING 以获取详细信息。

安全

如果您发现任何安全相关的问题，请通过电子邮件 em@gonoware.com 而不是使用问题跟踪器。

鸣谢

许可

MIT

版权（c）2018-至今 Go NoWare

abhisheksh / laravel-maps

维护者

详细信息