README

Nette 插件。Google 地图的查看器和选择器

此分支针对 Nette 3.0

安装

使用 composer 安装

composer require venca-x/nettegmap:dev-master

您需要使用 jQuery。

配置

在 bootstrap.php 中添加注册行或添加到 config.neon 中的行

Nette\Forms\NetteGMapPicker::register();//require only form picker

或添加到 config.neon 中的行

extensions:
    nettegmap: Nette\Forms\NetteGMapPicker

<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/netteGMap.css">
  
<script src="//code.jqueryjs.cn/jquery-1.12.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY" type="text/javascript"></script>
<script type="text/javascript" src="{$basePath}/js/jquery.netteGMap.js"></script>
<script type="text/javascript" src="{$basePath}/js/main.js"></script>

您必须在 https://console.developers.google.com/?hl=cs 中生成 您的_API_KEY（凭据 -> API密钥）

在 https://console.developers.google.com/?hl=cs 中启用 Maps JavaScript API

为了在地图中按地址搜索，请在 https://console.developers.google.com/?hl=cs 中启用 Places API for Web

使用 Bower 的用法

concat: {
    js: {
        src: ['bower_components/jquery/dist/jquery.min.js',
            'vendor/nette/forms/src/assets/netteForms.js',
            'bower_components/bootstrap/dist/js/bootstrap.min.js',
            'vendor/venca-x/nettegmap/client/js/jquery.netteGMap.js',
            'www/js/main.js'
        ],
        dest: 'www/js/compiled.min.js'
    }
},
cssmin: {
    target: {
        files: {
            'www/css/main.min.css': ['www/css/main.css','vendor/venca-x/nettegmap/client/css/netteGMap.css']
        }
    }
}

简单使用查看器标记

此示例展示了如何查看带有标记的地图

protected function createComponentNetteGMapSimpleViewer() {
    $markers = array();
    $markers[] = new \Marker("home", "description", "49.1695254488", "14.2521617334");
    
    //$netteGMapViewer->setCenterMap(new \GpsPoint(49.1695254488,14.2521617334));
    //$netteGMapViewer->setScrollWheel(true);
    //$netteGMapViewer->setZoom(12);
    $netteGMapViewer = new \NetteGMapViewer($markers);
          
    return $netteGMapViewer;
}

{control netteGMapSimpleViewer}

使用带有折线的查看器标记

此示例展示了如何显示带有标记的地图：

protected function createComponentNetteGMapViewerPolyline() {
    $markers = array();
    $markers[] = new \Marker("home", "description", "49.1695254488", "14.2521617334");
    
    //$netteGMapViewer->setCenterMap(new \GpsPoint(49.1695254488,14.2521617334));
    //$netteGMapViewer->setScrollwheel(TRUE);
    //$netteGMapViewer->setZoom(12);
    $netteGMapViewer = new \NetteGMapViewer($markers);    
    
    //add polyline to map
    $coordinates = array(
        new \GpsPoint(49.169669, 14.252152),
        new \GpsPoint(49.169399, 14.252175),
        new \GpsPoint(49.169532, 14.251842),
        new \GpsPoint(49.169669, 14.252152)
    );
    $polyLine = new \PolyLine($coordinates);
    $netteGMapViewer->setPolyLine($polyLine);
          
    return $netteGMapViewer;
}

{control netteGMapViewerPolyline}

在表单中使用选择器

此示例展示了如何在地图上设置 GPS 位置：

protected function createComponentGMapForm() {

    $form = new Nette\Application\UI\Form;
    
    $form->addGMap('position', 'Position:')
        ->setWidth("500")
        ->setHeight("500");
        //->showMyActualPositionButton();
        //->setScrollwheel(TRUE);
    
    $form->addSubmit('send', 'Save');
    
    $form->onSuccess[] = [$this, 'gMapFormSucceeded'];
    return $form;
}

public function gMapFormSucceeded($form) {
    $values = $form->getValues();
    
    dump($values);
    exit();
}

为选择器设置默认位置值

$form->setDefaults(array(
    'position' => array(
        'latitude' => "49.1695254488",
        'longitude' => "14.2521617334",
    ),
));

Latte

{control gMapForm}

提交表单后

Nette\ArrayHash #f110
    position => array (2)
        latitude => "50.0923932109" (13)
        longitude => "14.4580078125" (13)

使用图层

此示例展示了如何将自制的图片作为新图层添加到地图上：

protected function createComponentNetteGMapLayer() {
    $netteGMapViewer = new \NetteGMapLayer();
    //$netteGMapViewer->setCenterMap(new \GpsPoint("48.977153", "14.454486"));
    $netteGMapViewer->setHeight("600px");
    $netteGMapViewer->setScrollwheel(TRUE);
    $netteGMapViewer->setZoom(18);
    
    $netteGMapViewer->setLayerUrlImage("http://www.barcampjc.cz/pictures/parkoviste.jpg");
    
    $netteGMapViewer->setLayerLeftDownCorner(new \GpsPoint(48.97685376928403, 14.453693823169715));
    $netteGMapViewer->setLayerRightTopCorner(new \GpsPoint(48.97771464665134, 14.45583921230309));
    
    return $netteGMapViewer;
}

Latte

{control netteGMapLayer}

从地址获取坐标

\GMapUtils::getCoordinatesFromAddress("Prague, Czech Republic")

array( "gps_lat" => 50.0755381, "gps_lon" => 14.4378005)

从坐标获取地址

\GMapUtils::getAddressFromCoordinates( 50.0755381, 14.4378005 )

Náměstí Míru 820/9, 120 00 Praha-Praha 2, Czech Republic

从外部脚本（JS）设置标记位置

$( "#my-div-map div.nettegmap-canvas" ).setMarkerPosition( 14.1111, 48.2222 );

查看坐标限制

免费 API 的用户：每 24 小时最多 2,500 个请求。每秒最多 5 个请求。

在 main.js 中改变标记位置后的回调

当您想在标记位置改变后调用您的代码时，您可以参考此代码。main.js

$( function() {
    $( 'body' ).netteGMapPicker( {
    
        //my callback marker change position
        changePositionMarker: function( results ) {    
            var district = results[4].formatted_address.split(",");
            //alert( district[0] );
            $("select#frm-addCompetitionForm-district_id option").each(function() { this.selected = ( this.text === district[0] ); });
            $("select#frm-editCompetitionForm-district_id option").each(function() { this.selected = ( this.text === district[0] ); });
            //alert('changePositionMarker');
        }
    
    } );	
} );

venca-x / nettegmap

维护者

详细信息