README

对于 Laravel 4.x，请检查 版本 1.0.1

将 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": "2.*"
}

接下来，从终端更新 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 Key 设置为 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。
• 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 - 标记隐藏并显示计数之前，聚类中标记的最小数量。

用法

它真的就像在任何您觉得合适的控制器 / 模型 / 文件中使用 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, ['symbol' => 'circle', 'scale' => 1000]);
Mapper::map(52.381128999999990000, 0.470085000000040000)->marker(53.381128999999990000, -1.470085000000040000, ['markers' => ['symbol' => 'circle', 'scale' => 1000, 'animation' => 'DROP']]);

可拖动标记

如果您需要可拖动标记，可以添加选项 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, '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 许可协议