README

感谢 Bradley Cornford 创造了原始的 。

简介

将 Laravel Google Maps 视为一个将 Google Maps 无缝集成到 Laravel 中的简化解决方案。它提供了一系列便捷的助手来加速地图的利用，包括

• Mapper::map
• Mapper::location
• Mapper::streetview
• Mapper::marker
• Mapper::informationWindow
• Mapper::polyline
• Mapper::polygon
• Mapper::rectangle
• Mapper::circle
• Mapper::render

安装

composer require davidvandertuijn/laravel-google-maps

接下来，通过终端更新 Composer

composer update

操作完成后，继续添加服务提供者。打开 app/config/app.php 并在提供者数组中添加一个新项。

Davidvandertuijn\LaravelGoogleMaps\MapperServiceProvider::class,

随后，引入外观。同样，在 app/config/app.php 中，向别名数组添加一个新项。

'Mapper' => Davidvandertuijn\LaravelGoogleMaps\Facades\MapperFacade::class,

最后，将配置文件集成到您的应用程序中。

php artisan vendor:publish --provider="Davidvandertuijn\LaravelGoogleMaps\MapperServiceProvider" --tag=laravel-google-maps

不要忘记将您的 Google API 密钥配置为 GOOGLE_API_KEY 环境变量。从 Google 开发者控制台 为您的项目获取一个 API 密钥。

配置

只需几个步骤就可以轻松配置 Laravel Google Maps。打开 config/laravel-google-maps.php 并相应地调整选项。

• enabled - 启用 Google Maps。
• key - Google Maps API 密钥。
• region - Google Maps 应使用的区域，以 ISO 3166-1 代码格式要求，例如 GB。
• language - Google Maps 应使用的语言，以 ISO 639-1 代码格式要求，例如 en-gb。
• async - 异步执行 Laravel Google Maps 地图的加载和渲染，例如 false。
• marker - 自动为您地图的初始位置添加 Google Maps 标记，例如 true。
• center - 当为 false 时，自动将 Google Maps 定位到初始位置，例如 true。
• locate - 当为 false 时，自动将 Google Maps 定位到用户的当前位置，例如 true。
• zoom - 设置 Google Maps 的默认缩放级别，例如 8。
• scrollWheelZoom - 设置 Google Maps 的默认滚轮缩放，例如 true。
• zoomControl - 设置 Google Maps 的默认缩放控制，例如 true。
• mapTypeControl - 设置 Google Maps 的默认地图类型控制，例如 true。
• scaleControl - 设置 Google Maps 的默认比例控制，例如 true。
• streetViewControl - 设置 Google Maps 的默认街景控制，例如 true。
• rotateControl - 设置 Google Maps 的默认旋转控制，例如 true。
• fullscreenControl - 设置 Google Maps 的默认全屏控制，例如 true。
• gestureHandling - 设置 Google Maps 的默认手势处理，例如 auto, none, cooperative, greedy。
• type - 设置 Google Maps 的默认地图类型，例如 ROADMAP, SATELLITE, HYBRID, TERRAIN。
• ui - 显示 Google Maps 的默认 UI 选项，例如 true。
• markers.icon - 设置默认标记图标，例如 img/icon.png。
• markers.animation - 设置默认标记动画，例如 NONE, DROP, BOUNCE。
• markers.autoClose - 当点击其他标记时，自动关闭当前标记的信息窗口，例如：true。
• cluster - 设置是否使用地图标记聚合。
• clusters.icon - 使用图标路径显示聚合的定制图片。
• clusters.grid - 聚合的网格大小（像素）。
• clusters.zoom - 标记可以成为聚合的一部分的最大缩放级别。
• clusters.center - 是否应将每个聚合的中心设置为该聚合中所有标记的平均值。
• clusters.size - 在标记被隐藏并显示计数之前，聚合中标记的最小数量。

使用方法

很简单——根据需要，在Controller/Model/File中使用Mapper类

Mapper:

这将为您访问以下内容

• 地图
• 位置
• 街景
• 标记
• 信息窗口
• 折线
• 多边形
• 矩形
• 圆
• 渲染
• JavaScript渲染

示例

在控制器 MapController.php 中初始化地图

use Mapper;

public function index()
{
	Mapper::map(53.381128999999990000, -1.470085000000040000);

	return view('map')
}

在视图 map.blade.php 中添加以下代码以渲染地图

<div style="width: 500px; height: 500px;">
	{!! Mapper::render() !!}
</div>

地图

map 方法允许创建地图，包含纬度、经度以及可选的参数。

Mapper::map(53.381128999999990000, -1.470085000000040000);
Mapper::map(53.381128999999990000, -1.470085000000040000, ['zoom' => 15, 'center' => false, 'marker' => false, 'type' => 'HYBRID', 'overlay' => 'TRAFFIC']);
Mapper::map(53.381128999999990000, -1.470085000000040000, ['zoom' => 10, 'markers' => ['title' => 'My Location', 'animation' => 'DROP']]);
Mapper::map(53.381128999999990000, -1.470085000000040000, ['zoom' => 10, 'markers' => ['title' => 'My Location', 'animation' => 'DROP'], 'cluster' => false]);
Mapper::map(53.381128999999990000, -1.470085000000040000, ['zoom' => 10, 'markers' => ['title' => 'My Location', 'animation' => 'DROP'], 'clusters' => ['size' => 10, 'center' => true, 'zoom' => 20]]);

地图事件

加载前

在地图加载前触发此事件。

Mapper::map(53.381128999999990000, -1.470085000000040000, ['eventBeforeLoad' => 'console.log("before load");']);

加载后

在地图加载后触发此事件。

Mapper::map(53.381128999999990000, -1.470085000000040000, ['eventAfterLoad' => 'console.log("after load");']);

位置

location 方法允许通过字符串搜索位置，返回包含纬度和经度的Location对象。

Mapper::location('Sheffield');
Mapper::location('Sheffield')->map(['zoom' => 15, 'center' => false, 'marker' => false, 'type' => 'HYBRID', 'overlay' => 'TRAFFIC']);
Mapper::location('Sheffield')->streetview(1, 1, ['ui' => false]);

街景

streetview 方法允许创建街景地图，包含纬度、经度、航向、俯仰和可选的参数。

Mapper::streetview(53.381128999999990000, -1.470085000000040000, 1, 1);
Mapper::streetview(53.381128999999990000, -1.470085000000040000, 1, 1, ['ui' => false]);

标记

marker 方法允许向地图添加标记，包含纬度、经度和可选的参数。

Mapper::marker(53.381128999999990000, -1.470085000000040000);
Mapper::marker(53.381128999999990000, -1.470085000000040000, ['animation' => 'DROP', 'label' => 'Marker', 'title' => 'Marker', 'draggable' => true]);
Mapper::marker(53.381128999999990000, -1.470085000000040000, ['icon' => 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=|FE6256|000000']);
Mapper::marker(53.381128999999990000, -1.470085000000040000, ['icon' => ['url' => 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=|FE6256|000000', 'scale' => 100]]);
Mapper::map(52.381128999999990000, 0.470085000000040000, ['markers' => ['icon' => ['symbol' => 'CIRCLE', 'scale' => 10], 'animation' => 'DROP', 'label' => 'Marker', 'title' => 'Marker']])->marker(53.381128999999990000, -1.470085000000040000);
Mapper::marker(53.381128999999990000, -1.470085000000040000, [
	'title' 	=> 'title',
	'icon'      => [
		'path'         => 'M10.5,0C4.7,0,0,4.7,0,10.5c0,10.2,9.8,19,10.2,19.4c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1C11.2,29.5,21,20.7,21,10.5 C21,4.7,16.3,0,10.5,0z M10.5,5c3,0,5.5,2.5,5.5,5.5S13.5,16,10.5,16S5,13.5,5,10.5S7.5,5,10.5,5z',
		'fillColor'    => '#DD716C',
		'fillOpacity'  => 1,
		'strokeWeight' => 0,
		'anchor'       => [0, 0],
		'origin'       => [0, 0],
		'size'         => [21, 30]
	],
	'label'     => [
		'text' => 'Marker',
		'color' => '#B9B9B9',
		'fontFamily' => 'Arial',
		'fontSize' => '13px',
		'fontWeight' => 'bold',
	],
	'autoClose' => true,
	'clickable' => false,
	'cursor' => 'default',
	'opacity' => 0.5,
	'visible' => true,
	'zIndex' => 1000,
]);

可拖拽标记

如果您需要可拖拽的标记，可以添加draggable选项。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true]);

可拖拽事件

点击

当标记图标被点击时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventClick' => 'console.log("left click");']);

双击

当标记图标被双击时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventDblClick' => 'console.log("double left click");']);

右键点击

在标记上右键点击时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventRightClick' => 'console.log("right click");']);

鼠标悬停

当鼠标进入标记图标区域时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventMouseOver' => 'console.log("mouse over");']);

鼠标按下

在标记上鼠标按下时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventMouseDown' => 'console.log("mouse down");']);

鼠标抬起

在标记上鼠标抬起时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventMouseUp' => 'console.log("mouse up");']);

鼠标离开

当鼠标离开标记图标区域时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventMouseOut' => 'console.log("mouse out");']);

拖动

当用户拖动标记时，此事件会重复触发。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventDrag' => 'console.log("dragging");']);

拖动开始

当用户开始拖动标记时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventDragStart' => 'console.log("drag start");']);

拖动结束

当用户停止拖动标记时触发此事件。

Mapper::marker(53.381128999999990000, -1.470085000000040000, ['draggable' => true, 'eventDragEnd' => 'console.log("drag end");']);

信息窗口

informationWindow 方法允许向地图添加信息窗口，包含纬度、经度、内容以及可选的参数。

Mapper::informationWindow(53.381128999999990000, -1.470085000000040000, 'Content');
Mapper::informationWindow(53.381128999999990000, -1.470085000000040000, 'Content', ['open' => true, 'maxWidth'=> 300, 'autoClose' => true, 'markers' => ['title' => 'Title']]);
Mapper::map(52.381128999999990000, 0.470085000000040000)->informationWindow(53.381128999999990000, -1.470085000000040000, 'Content', ['markers' => ['animation' => 'DROP']]);

折线

polyline 方法允许向地图添加折线，包含坐标以及可选的参数。

Mapper::polyline([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]]);
Mapper::polyline([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]], ['editable' => 'true']);
Mapper::map(52.381128999999990000, 0.470085000000040000)->polyline([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]], ['strokeColor' => '#000000', 'strokeOpacity' => 0.1, 'strokeWeight' => 2]);

多边形

polygon 方法允许向地图添加多边形，包含坐标以及可选的参数。

Mapper::polygon([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]]);
Mapper::polygon([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]], ['editable' => 'true']);
Mapper::map(52.381128999999990000, 0.470085000000040000)->polygon([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]], ['strokeColor' => '#000000', 'strokeOpacity' => 0.1, 'strokeWeight' => 2, 'fillColor' => '#FFFFFF']);

矩形

rectangle 方法允许向地图添加矩形，包含坐标以及可选的参数。

Mapper::rectangle([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]]);
Mapper::rectangle([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]], ['editable' => 'true']);
Mapper::map(52.381128999999990000, 0.470085000000040000)->rectangle([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000], ['latitude' => 52.381128999999990000, 'longitude' => 0.470085000000040000]], ['strokeColor' => '#000000', 'strokeOpacity' => 0.1, 'strokeWeight' => 2, 'fillColor' => '#FFFFFF']);

圆

circle 方法允许向地图添加圆，包含坐标以及可选的参数。

Mapper::circle([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000]]);
Mapper::circle([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000]], ['editable' => 'true']);
Mapper::map(52.381128999999990000, 0.470085000000040000)->circle([['latitude' => 53.381128999999990000, 'longitude' => -1.470085000000040000]], ['strokeColor' => '#000000', 'strokeOpacity' => 0.1, 'strokeWeight' => 2, 'fillColor' => '#FFFFFF', 'radius' => 1000]);

渲染

render 方法允许将所有地图渲染到页面上，此方法可以包含在视图中或作为控制器传递的参数，可选参数为item。

Mapper::render();
Mapper::render(0);

JavaScript渲染

renderJavascript 方法允许将所有必需的JavaScript渲染到页面上，此方法可以包含在视图中或作为控制器传递的参数。

Mapper::renderJavascript();