occ2/nette-mapy-cz

基于 MAPY.CZ API 的 Nette Framework 地图控件和表单地图选择器

1.1.2 2019-10-02 13:47 UTC

README

使用 mapy.cz API 为 Nette Framework 提供地图坐标选择器和地图控件

安装

composer require occ2/nette-mapy-cz

安装 JS 文件

将 assets/mapycz.js 添加到您的网页目录中(www/js 等)

将 MAPY.CZ 加载器和项目 JavaScript 文件添加到您的页面标题中

<head>
	<script src="https://api.mapy.cz/loader.js"></script>
	<script>Loader.load()</script>
	<script src="_your_js_directory_/mapycz.js"></script>
</head>

配置设置

在您的 config.neon 中注册控制工厂作为服务,添加选择器到您的表单中

# register method addGpsPicker to youe forms
extensions:
  mapycz: MapyCZ\DI\GPSPickerExtension

services:
  # add filter json to your latte engine 
  nette.latteFactory:
    setup:
      - addFilter(json, MapyCZ\Helpers\Filters::json)
  # create map control factory service
  - MapyCZ\Controls\MapControl\Factories\IMapControlFactory

使用方法

在您的演示者中

use MapyCZ\Controls\MapControl\Factories\IMapControlFactory;
use MapyCZ\Controls\MapControl;
use Nette\Application\UI\Form;

/**
 * @var IMapControlFactory
 * @inject
 */
public $mapControlFactory;

...

/**
 * @return MapControl
 * @param string $name
 */
protected function createComponentMap(string $name): MapControl
{
    $map = $this->mapControlFactory->create();
    $map->settings = [
        "mapId" => "map", // HTML id of map element
        "width" => 400, // map width in pixels
        "height" => 300, // map height in pixels
        "units" => "px", // units of map dimensiosns 
        "mapType" => 1, // default map
        "center" => [ // default center of map
            "latitude" => 50,
            "longitude" => 15,
        ],
        "defaultZoom" => 13, // default zoom
        "controls" => true, // show controls
    ];
    $this->addComponent($map, $name);
    return $map;
}

...

/**
 * @return Form
 * @param string $name
 */
protected function createComponentForm(string $name): Form
{
	$form = new Form();
	
	...
	$form->addGpsPicker('gps', 'Vyberte polohu')
             ->setSettings([
                "mapId" => "map",
                "width" => 400,
                "height" => 300,
                "mapType" => 1,
                "units" =>  "px",
                "center" => [
                    "latitude" => 50,
                    "longitude" => 15,
                ],
                "defaultZoom" => 12,
                "controls" => true,
             ]);
	..
	
	$this-addComponent($form, $name);
	return $form;
}

GPS 选择器在服务器端验证坐标(纬度 -90 - 90,经度 -180 - 180),并返回包含纬度和经度属性的 ArrayHash

	 $values = $form->getValues();
	 $latitude = $values->gps->latitude;
	 $longitude = $values->gps->longitude;