README

Google Maps Yii2 封装

从 [https://github.com/tugmaks/yii2-google-maps] 分支而来，并

增加了信息窗口支持。
移除了单位参数。
增加了地图选项参数（样式）。
增加了标记选项（图标）。
增加了地图输入小部件。

安装

安装此扩展的首选方法是通过 composer。

运行以下命令之一

php composer.phar require --prefer-dist voime/yii2-google-maps "*"

或将其添加到您的 composer.json 文件的 require 部分。

"voime/yii2-google-maps": "*"

必须阅读

Google Maps JavaScript API v3

基本用法

一旦安装了扩展，只需在您的代码中通过

设置 API KEY 有两种方式

use voime\GoogleMaps\Map;

echo Map::widget([
    'zoom' => 16,
    'center' => 'Red Square',
    'width' => '700px',
    'height' => '400px',
    'mapType' => Map::MAP_TYPE_SATELLITE,
]);

添加到应用程序参数。

或直接传递给小部件。

config/params.php

return [
.....
'GOOGLE_API_KEY' => 'VIza7yBgBzYEbKx09V566DhM8Ylc3NjWsJ0ps-2' // use your own api key
.....
]

参数

use voime\GoogleMaps\Map;

echo Map::widget([
    'apiKey'=> 'VIza7yBgBzYEbKx09V566DhM8Ylc3NjWsJ0ps-2',
    'zoom' => 3,
    'center' => [20, 40.555],
    'width' => '700px',
    'height' => '400px',
    'mapType' => Map::MAP_TYPE_HYBRID,
]);

标记

一个或多个标记可以添加到地图中。只需将标记数组传递给小部件配置

use voime\GoogleMaps\Map;

echo Map::widget([
    'mapOptions' => ['styles' => file_get_contents(Yii::getAlias('@webroot/res/map-styles.json'))],
    'zoom' => 5,
    'center' => [45, 45],
    'markers' => [
        ['position' => 'Tartu', 'title' => 'marker title', 'content' => 'InfoWindow content', 'options' => ["icon" => "'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'"]],
        ['position' => [56,27]],
    ]
]);

标记选项

允许以下选项

标记适合边界

有时您需要在地图上显示所有标记，但不知道初始地图中心和缩放级别。在这种情况下，使用以下类似的小部件

use voime\GoogleMaps\Map;

echo Map::widget([
    'width' => '50%',
    'height' => '600px',
    'mapType' => Map::MAP_TYPE_HYBRID,
    'markers' => [
        ['position' => 'Belgrad'],
        ['position' => 'Zagreb'],
        ['position' => 'Skopje'],
        ['position' => 'Podgorica'],
        ['position' => 'Sarajevo'],
    ],
    'markerFitBounds'=>true
]);

地图输入

地图输入小部件示例。这需要以下输入

address-input 用于地图上的地址搜索
lat-input 用于纬度
lng-input 用于经度
country-input 用于国家名称 [可选]

use voime\GoogleMaps\MapInput;

<?= $form->field($model, 'address')->textInput(['id'=>'address-input']) ?>

<?php
echo MapInput::widget([
    'height' => '400px',
    'zoom' => Yii::$app->params['map_zoom_one'],
    'countryInput' => 'country-input',
    'mapOptions' => [
        'styles' => file_get_contents(Yii::getAlias('@webroot/res/map-styles.json')),
        'maxZoom' => '15',
    ],
    'markerOptions' => ['icon'=>"'" . Yii::getAlias('@web/res/img/marker.png') . "'"],
]);
?>
<?=$form->field($model, 'latitude')->hiddenInput(['id'=>'lat-input'])->label(false) ?>
<?=$form->field($model, 'longitude')->hiddenInput(['id'=>'lng-input'])->label(false) ?>
<?=$form->field($model, 'country')->hiddenInput(['id'=>'country-input'])->label(false) ?>

voime / yii2-google-maps

维护者

详细信息