pigochu/yii2-jquery-locationpicker

yii2 的 jQuery 地理位置选择小部件

维护者

详细信息

github.com/pigochu/yii2-jquery-locationpicker

主页

源代码

问题

安装次数: 38,524

依赖项: 2

建议者: 0

安全: 0

星标: 20

关注者: 4

分支: 7

开放问题: 3

类型:yii2-extension

0.2.5 2018-03-31 16:00 UTC

Requires

  • bower-asset/jquery-locationpicker-plugin: >=0.1.15

MIT 8c042c5c0a33402703b5a5a5e0392e0c65d4ea08

  • Pigo Chu <pigochu.woop@gmail.com>

extensionyii2locationpicker

This package is not auto-updated.

Last update: 2024-09-14 18:20:33 UTC

README

该小部件实现了 jquery-locationpicker-plugin

安装

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

运行以下命令之一

php composer.phar require pigochu/yii2-jquery-locationpicker ">=0.2.0"

或者

"pigochu/yii2-jquery-locationpicker": ">=0.2.0"

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

测试的基本用法

<?= \pigolab\locationpicker\LocationPickerWidget::widget(); ?>

将 UI 与小部件绑定

此示例通过 http://logicify.github.io/jquery-locationpicker-plugin/#usage 转换

<?php
use yii\web\JsExpression;
?>

Location: <input type="text" id="us2-address" style="width: 200px"/>
<br>
Radius: <input type="text" id="us2-radius"/>
<br>
Lat.: <input type="text" id="us2-lat"/>
<br>
Long.: <input type="text" id="us2-lon"/>
<br>


<?php
    echo \pigolab\locationpicker\LocationPickerWidget::widget([
       'key' => 'abcabcabcabc ...',	// require , Put your google map api key
       'options' => [
            'style' => 'width: 100%; height: 400px', // map canvas width and height
        ] ,
        'clientOptions' => [
            'location' => [
                'latitude'  => 46.15242437752303 ,
                'longitude' => 2.7470703125,
            ],
            'radius'    => 300,
            'addressFormat' => 'street_number',
            'inputBinding' => [
                'latitudeInput'     => new JsExpression("$('#us2-lat')"),
                'longitudeInput'    => new JsExpression("$('#us2-lon')"),
                'radiusInput'       => new JsExpression("$('#us2-radius')"),
                'locationNameInput' => new JsExpression("$('#us2-address')")
            ]
        ]        
    ]);
?>

CoordinatesPicker

CoordinatesPicker 允许您在 ActiveForm 中获取坐标，此外我还实现了一些原生的 jQuery-locationpicker-plugin 中没有的功能

  • 启用/禁用搜索框，搜索框将覆盖在地图上
  • 启用/禁用所有 Google Map 的控件

示例

<?php
	echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [
		'key' => 'abcabcabc...' ,	// require , Put your google map api key
		'valueTemplate' => '{latitude},{longitude}' , // Optional , this is default result format
		'options' => [
			'style' => 'width: 100%; height: 400px',  // map canvas width and height
		] ,
		'enableSearchBox' => true , // Optional , default is true
		'searchBoxOptions' => [ // searchBox html attributes
			'style' => 'width: 300px;', // Optional , default width and height defined in css coordinates-picker.css
		],
		'searchBoxPosition' => new JsExpression('google.maps.ControlPosition.TOP_LEFT'), // optional , default is TOP_LEFT
		'mapOptions' => [
			// google map options
			// visit https://developers.google.com/maps/documentation/javascript/controls for other options
            'mapTypeControl' => true, // Enable Map Type Control
            'mapTypeControlOptions' => [
                  'style'    => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
                  'position' => new JsExpression('google.maps.ControlPosition.TOP_LEFT'),
			],
            'streetViewControl' => true, // Enable Street View Control
        ],
		'clientOptions' => [
			// jquery-location-picker options
			'radius'    => 300,
            'addressFormat' => 'street_number',
		]
	]);
?>

获取坐标

默认的 valueTemplate 是 '{latitude},{longitude}'，因此我们将得到类似的结果：'25.023308046766083,121.46041916878664'

我们可以通过 explode() 转换它

<?php
list($latitude,$longitude) = explode(',' , $model->coordinates);
?>

已弃用选项：enableMapTypeControl

从版本 0.2.0 开始，不要使用 'enableMapTypeControl'，我添加了 'mapOptions' 用于设置 Google Map 选项。您现在可以启用/禁用所有控件或设置控件的风格、位置。

示例：启用 rotateControl、streetViewControl、mapTypeControl 并设置样式/位置

<?php
   echo $form->field($model, 'coordinates')->widget('\pigolab\locationpicker\CoordinatesPicker' , [

        'clientOptions' => [ 'zoom' => 20 ], // rotateControl will display when zoom is 20
        // .... other options ...
		'mapOptions' => [
			// set google map optinos
			'rotateControl' => true,
			'scaleControl' => false,
			'streetViewControl' => true,
			'mapTypeId' => new JsExpression('google.maps.MapTypeId.SATELLITE'),
			'heading'=> 90,
            'tilt' => 45 ,
                
			'mapTypeControl' => true,
            'mapTypeControlOptions' => [
                  'style'    => new JsExpression('google.maps.MapTypeControlStyle.HORIZONTAL_BAR'),
                  'position' => new JsExpression('google.maps.ControlPosition.TOP_CENTER'),
			]
		]
   ]);
?>

请访问 Google Maps 全部控件文档：https://developers.google.com/maps/documentation/javascript/controls

其他文档