README

Google Maps Yii2 包装器

安装

通过以下方式安装此扩展是最受欢迎的方法：composer。

运行以下命令之一

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

或将以下内容添加到您的 composer.json 文件的 require 部分中。

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

必须阅读

Google Maps JavaScript API v3

基本用法

一旦安装了此扩展，您只需在代码中使用它即可

有两种设置 API 密钥的方式

use globaloxs\GoogleMaps\Map;

    echo Map::widget([
        'zoom' => $zoom,
        'center' => $center,
        'width' => 850,
        'height' => 600,
        'mapType' => Map::MAP_TYPE_ROADMAP,
        'markers' => $markers,
        'onClickMarker'=> new \yii\web\JsExpression('function(id, marker,map, infowindow){

        }'),
        'onZoomChanged' => new \yii\web\JsExpression('function() {

        }'),
        'onDragEnd' => new \yii\web\JsExpression('function() {

        }'),
        'markerClustererOptions'=> [
            'imagePath'=> \yii\helpers\Url::to('@web/imgs/circulo-mc')]
        ]);

添加到应用程序参数中。

或直接传递给小部件。

config/params.php

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

参数

use globaloxs\GoogleMaps\Map;

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

标记

标记

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

use globaloxs\GoogleMaps\Map;

echo Map::widget([
    'zoom' => 5,
    'center' => [45, 45],
    'width' => 1100,
    'height' => 600,
    'mapType' => Map::MAP_TYPE_HYBRID,
    'markers' => [
        ['position' => 'Erevan'],
        ['position' => 'Moscow'],
        ['position' => 'Ankara'],
        ['position' => 'Kazan'],
        ['position' => 'Sofia'],
    ]
]);

标记选项

允许以下选项

标记适应边界

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

use globaloxs\GoogleMaps\Map;

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