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地图默认用户界面选项，例如：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 许可证许可。

icreaciones / googlmapper

维护者

详细信息

README

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

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

安装

配置

使用方法

示例

地图

地图事件

位置

街景

标记

可拖动标记

可拖动事件

信息窗口

多边形线

多边形

矩形

圆形

渲染

渲染JavaScript

许可证

icreaciones / 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