README

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

支持的地图服务

Google Maps
OpenStreetMap
Bing Maps
MapQuest
Yandex Maps
MapKit (beta)

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

功能

	Google Maps	OpenStreetMap	Bing Maps	MapQuest	Yandex Maps	MapKit
地图	✔	✔	✔	✔	✔	✔
标记	✔	✔	✔	✔	✔	✔
标记链接	✔	✔	✔	✔	✔	✔
标记弹出窗口	✔	✔	✔	✔	✔	❌
自定义标记图标	✔	✔	✔	✔	✔	✔
标记点击事件	✔	✔	✔	✔	✔	✔

安装

此包可以通过 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

使用方法

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

@mapstyles

然后，在 </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

gonoware / laravel-maps

维护者

详情