tailonperin/googlmapper

轻松将 Google Maps 集成到 Laravel 中的方法。

维护者

详细信息

github.com/tailonperin/Googlmapper

源代码

安装: 5

依赖: 0

建议者: 0

安全性: 0

星星: 0

关注者: 0

分支: 143

v3.4.0 2020-09-11 20:39 UTC

Requires

Requires (Dev)

MIT e67233fa3f0034d6911f9ae62131f765e713980a

  • Bradley Cornford <me.woop@bradleycornford.co.uk>

mapgooglemappingmapslaravelstreetview

This package is not auto-updated.

Last update: 2024-09-22 14:08:14 UTC

README

Latest Stable Version Total Downloads Build Status Scrutinizer Code Quality

对于 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 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:

这将为您访问以下内容

示例

在控制器 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 方法允许将所有地图渲染到页面上，此方法可以包含在视图（Views）中，或作为控制器传递的参数，还可以作为项目的可选参数。

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

JavaScript渲染

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

Mapper::renderJavascript();

许可证

Googlmapper 是开源软件，遵循 MIT 许可证