lucianolima00 / yii2-map-input-widget
Yii2 地图输入小部件。允许您通过友好的界面选择地理坐标。
v1.0.2
2023-01-30 19:48 UTC
This package is auto-updated.
Last update: 2024-09-29 06:09:14 UTC
README
描述
这是一个Yii2 输入小部件,它提供了一个用户友好的界面,通过Google 地图选择地理坐标。用户可以通过点击嵌入网页中的交互式 Google 地图来选择地理坐标。此外,用户还可以输入地点名称,通过 Google Places API 搜索它。
该小部件支持composer。您可以从Packagist 仓库获取最新版本。
演示
一个简单的演示小部件在这里可用here。您可以通过一些网页开发工具(例如Firebug)检查隐藏的输入值,以查看如何在小部件内部表示地理坐标。
使用示例
最小示例
所有小部件参数都是可选的,有一些合理的默认值,可能不需要配置。
echo $form->field($model, 'coordinates')->widget('kolyunya\yii2\widgets\MapInputWidget');
扩展示例
以下示例中描述了所有可配置的小部件参数(这些参数不是从yii\widgets\InputWidget派生的)的详尽列表。
echo $form->field($model, 'coordinates')->widget( 'kolyunya\yii2\widgets\MapInputWidget', [ // Google maps browser key. 'key' => $key, // Initial map center latitude. Used only when the input has no value. // Otherwise the input value latitude will be used as map center. // Defaults to 0. 'latitude' => 42, // Initial map center longitude. Used only when the input has no value. // Otherwise the input value longitude will be used as map center. // Defaults to 0. 'longitude' => 42, // Initial map zoom. // Defaults to 0. 'zoom' => 12, // Map container width. // Defaults to '100%'. 'width' => '420px', // Map container height. // Defaults to '300px'. 'height' => '420px', // Coordinates representation pattern. Will be use to construct a value of an actual input. // Will also be used to parse an input value to show the initial input value on the map. // You can use two macro-variables: '%latitude%' and '%longitude%'. // Defaults to '(%latitude%,%longitude%)'. 'pattern' => '[%longitude%-%latitude%]', // Google map type. See official Google maps reference for details. // Defaults to 'roadmap' 'mapType' => 'satellite', // Marker animation behavior defines if a marker should be animated on position change. // Defaults to false. 'animateMarker' => true, // Map alignment behavior defines if a map should be centered when a marker is repositioned. // Defaults to true. 'alignMapCenter' => false, // A flag which defines if a search bar should be rendered over the map. 'enableSearchBar' => true, ] );