README

GPS坐标选择器。 立即尝试！

驱动程序

• Google Maps API v3
• Mapy.cz API v4
• Nokia Maps API v2
• OpenStreetMap (使用 Google Maps API v3)

许可证

New BSD

依赖

Nette 2.4.x

演示

http://vojtechdobes.com/gpspicker/

安装

1. 从 Github 或通过 Composer (vojtech-dobes/nette-forms-gpspicker) 获取源代码。
2. 将 VojtechDobes\NetteForms\GpsPickerExtension 注册为扩展。
3. 在 app/templates/@layout.latte 中链接合适的地图 API SDK 和 client/nette.gpsPicker.js。

extensions:
	gpspicker: VojtechDobes\NetteForms\GpsPickerExtension

在 Nette 2.0 中，注册在 app/bootstrap.php

$configurator->onCompile[] = function ($configurator, $compiler) {
	$compiler->addExtension('gpspicker', new VojtechDobes\NetteForms\GpsPickerExtension);
};

	<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
	<script src="{$basePath}/libs/nette.gpsPicker.js"></script>
</body>

（例如使用 Google Maps API v3）

使用方法

$form->addGpsPicker('coords', 'Coordinates:');

您可以添加一些选项（每个选项也有类似设置器的东西）

$form->addGpsPicker('coords', 'Coordinates:', array(
	'type' => VojtechDobes\NetteForms\GpsPicker::TYPE_SATELLITE,
	'zoom' => 1, // something like whole planet I guess
	'size' => array(
		'x' => 411,
		'y' => 376,
	),
));

如果您喜欢手动渲染，可以省略标题

$form->addGpsPicker('coords', array(
	'type' => ...
	...
));

返回的值是具有 lat 和 lng 属性的 GpsPoint 实例。它继承自 Nette\Object。

$lat = $form->values->coords->lat;
$lng = $form->values->coords->lng;

您可以通过这种方式设置值（或默认值）

$form['coords']->setDefaultValue(array(
	'lat' => 50.103245,
	'lng' => 14.474691,
));

验证

use VojtechDobes\NetteForms\GpsPicker as Gps;

现在您可以轻松地在所需的 GPS 上添加各种约束

$form->addGpsPicker('coords')
	->addRule(Gps::MIN_LAT, 'Minimal latitude must be %f.', 20)
	->addRule(Gps::MIN_LNG, 'Minimal longitude must be %f.', 40)
	->addRule(Gps::MAX_LAT, 'Maximum latitude must be %f.', 20)
	->addRule(Gps::MAX_LNG, 'Maximum longitude must be %f.', 40)
	->addRule(Gps::MIN_DISTANCE_FROM, 'Minimal distance from Prague must be %d m.', array(15000, array(
		'lat' => 50.083,
		'lng' => 14.423,
	)));
	->addRule(Gps::MAX_DISTANCE_FROM, 'Maximum distance from Prague must be %d m.', array(100000, array(
		'lat' => 50.083,
		'lng' => 14.423,
	)));

前四个规则也将进行客户端验证。

手动渲染

如果用户不支持 JavaScript 或离线，选择器提供了设置坐标的几个手动输入。您也可以轻松手动渲染它们以及整个完整元素。

{form formName}
	...

	{gpspicker coords}
		{gpspicker:label lat}Latitude:{/gpspicker:label} {gpspicker:input lat}
		{gpspicker:label lng}Longitude:{/gpspicker:label} {gpspicker:input lng}
	{/gpspicker}
{/form}

通过地址搜索

默认启用，GpsPicker 支持通过输入地址搜索地图。额外的 <input> 元素将附加到地图上，通过 Google Places 自动完成服务增强。

如果您想手动渲染它，请使用 search 键

{gpspicker coords}
	{gpspicker:label search /} {gpspicker:input search}
{/gpspicker}

您可以使用 enableSearch/disableSearch 方法的配对来禁用/启用搜索功能

$form->addGpsPicker('coords', 'Coordinates:')
	->disableSearch();

或者在构造函数中

$form->addGpsPicker('coords', 'Coordinates:', array(
	'search' => FALSE,
));

提供商

如果您担心 Google Maps 的 API 速率限制，您也可以使用替代提供商。您需要做的就是链接它们的适当 API SDK 并设置驱动程序

$form->addGpsPicker('coords', 'Coordinates:')
	->setDriver(GpsPicker::DRIVER_SEZNAM);

可用的提供商包括

Google

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Nokia

<script src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all" charset="utf-8"></script>
<script>
	nokia.Settings.set('appId', 'XXX');
	nokia.Settings.set('authenticationToken', 'XXX');
</script>

OpenStreetMap

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Seznam (Mapy.cz)

<script src="http://api4.mapy.cz/loader.js"></script>
<script>Loader.load()</script>