README

对于 Laravel 5.x，请查看版本 2.35.1

对于 Laravel 4.x，请查看版本 1.27.0

将 Googlmapper 视为将 Google Maps 与 Laravel 集成的简单方法，提供各种辅助工具以加快地图利用速度。这些包括

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

安装

首先通过 Composer 安装此包。编辑您项目的 composer.json 文件，以添加 cornford/googlmapper 作为依赖。

"require": {
	"cornford/googlmapper": "3.*"
}

然后，在终端中更新 Composer

composer update

此操作完成后，下一步是添加服务提供者。打开 app/config/app.php，并将新的项目添加到 providers 数组中。

Cornford\Googlmapper\MapperServiceProvider::class,

下一步是引入门面。打开 app/config/app.php，并将新的项目添加到 aliases 数组中。

'Mapper'         => Cornford\Googlmapper\Facades\MapperFacade::class,

最后，我们需要将配置文件引入您的应用程序。

php artisan vendor:publish --provider="Cornford\Googlmapper\MapperServiceProvider" --tag=googlmapper

您还需要将您的 Google API 密钥设置为 GOOGLE_API_KEY 环境变量。要获取项目的 API 密钥，请访问 Google 开发者控制台。

就这样！您已经准备好了。

配置

您现在可以通过几个简单的步骤配置 Googlmapper。打开 app/config/packages/cornford/googlmapper/config.php 并按需更新选项。

enabled - 启用 Google Maps。
key - 一个 Google Maps API 密钥。
region - Google Maps 应使用的区域，必需以 ISO 3166-1 代码格式表示，例如 GB。
language - Google Maps 应使用的语言，必需以 ISO 639-1 代码格式表示，例如 en-gb。
async - 异步加载和渲染 Googlmapper 地图，例如 false。
marker - 自动为地图的初始位置添加 Google Maps 标记，例如 true。
center - 自动将 Google Maps 围绕初始位置居中，当为 false 时，Google Maps 将自动居中地图，例如 true。
locate - 自动将 Google Maps 围绕用户的当前位置居中，当为 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地图默认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 - 在隐藏标记并显示计数之前，簇中标记的最小数量。

用法

使用起来非常简单，就像在任何一个您认为合适的控制器 / 模型 / 文件中使用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方法允许将所有地图渲染到页面，此方法可以包含在视图中，或作为控制器传递的参数，并提供可选的项目参数。

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

渲染JavaScript

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

Mapper::renderJavascript();

许可证

Googlmapper 是开源软件，根据 MIT 许可证许可。

cornford / googlmapper

维护者

详细信息

README

对于 Laravel 5.x，请查看版本 2.35.1

对于 Laravel 4.x，请查看版本 1.27.0

安装

配置

用法

示例

地图

地图事件

位置

街景

标记

可拖动标记

可拖动事件

信息窗口

折线

多边形

矩形

圆形

渲染

渲染JavaScript

许可证

cornford / googlmapper

维护者

详细信息

README

对于 Laravel 5.x，请查看 版本 2.35.1

对于 Laravel 4.x，请查看 版本 1.27.0

安装

配置

用法

示例

地图

地图事件

位置

街景

标记

可拖动标记

可拖动事件

信息窗口

折线

多边形

矩形

圆形

渲染

渲染JavaScript

许可证

对于 Laravel 5.x，请查看版本 2.35.1

对于 Laravel 4.x，请查看版本 1.27.0