loveorigami/yii2-gmap

GoogleMaps 小部件在地图上以标记的形式显示一组用户地址。

安装: 320

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 3

分支: 0

公开问题: 2

语言:JavaScript

类型:yii2-extension

dev-master 2019-08-20 14:48 UTC

This package is auto-updated.

Last update: 2024-09-21 02:50:14 UTC


README

GoogleMaps 小部件在地图上以标记的形式显示一组用户地址。

安装

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

运行以下命令:

php composer.phar require loveorigami/yii2-gmap "*"

或者在您的 composer.json 文件的 require 部分添加以下内容:

"loveorigami/yii2-gmap": "*"

配置

要配置 Google Maps 密钥或其他选项,如语言、版本、库或地图选项

echo lo\widgets\gmap\MarkersWidget::widget([
    'googleMapsUrlOptions' => [
        'key' => 'this_is_my_key',
        'language' => 'id',
        'version' => '3.1.18',
    ],
    'googleMapsOptions' => [
        'mapTypeId' => 'roadmap',
        'tilt' => 45,
        'zoom' => 5,
    ],
]);

或者通过 yii 参数配置。例如

'params' => [
    'googleMapsUrlOptions' => [
        'key' => 'this_is_my_key',
        'language' => 'id',
        'version' => '3.1.18',
     ],
    'googleMapsOptions' => [
        'mapTypeId' => 'roadmap',
        'tilt' => 45,
        'zoom' => 10,
    ],
],

要获取密钥,请访问 页面

您可以在 选项页面找到 Google Maps 选项

小部件

  • 标记小部件

要使用 GoogleMaps,您需要配置其 [[locations]] 属性。例如

echo lo\widgets\gmap\MarkersWidget::widget([
		[
			'position' => [$model->lat, $model->lng],
			'open' => true,
			'content' => $model->name,
		],
		[
			'position' => [45.143400, -5.372400],
			'content' => 'My Marker',
		]
]);
  • 选择地图位置小部件

声明模型类以保存地理坐标

class SearchLocation extends \yii\base\Model
{
    ...
    public $address;
    public $longitude;
    public $latitude;
    ...
}

渲染小部件

$model = new SearchLocation();
$form = \yii\widgets\ActiveForm::begin();
...
$form->field($model, 'address')->widget(\lo\widgets\gmap\SelectMapLocationWidget::class, [
    'attributeLatitude' => 'latitude',
    'attributeLongitude' => 'longitude',
]);
...
\yii\widgets\ActiveForm::end();

要使用可移动标记,在地图上描述 draggable 选项

$model = new SearchLocation();
$form = \yii\widgets\ActiveForm::begin();
...
$form->field($model, 'address')->widget(\lo\widgets\gmap\SelectMapLocationWidget::className(), [
    'attributeLatitude' => 'latitude',
    'attributeLongitude' => 'longitude',
    'draggable' => true,
]);
...
\yii\widgets\ActiveForm::end();

要使用自定义字段模板,使用 ActiveField 的占位符 {map}

$model = new SearchLocation();
$form = \yii\widgets\ActiveForm::begin();
...
$form->field($model, 'address', [
    'template' => '{label}<div class="custom-class"><div class="form-control">{input}</div>{map}</div>{error}',
])->widget(\lo\widgets\gmap\SelectMapLocationWidget::className(), [
    'attributeLatitude' => 'latitude',
    'attributeLongitude' => 'longitude',
]);
...
\yii\widgets\ActiveForm::end();