README

这是一个用于Yii2框架的Widget，用于渲染带有Google Maps的地图，并允许用户在地图上选择位置并获取坐标。

安装

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

运行以下命令之一：

php composer.phar require --prefer-dist proximitymad/yii2-mapspicker-widget "1.0.*"

或者

"proximitymad/yii2-mapspicker-widget": "1.0.*"

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

用法

扩展安装后，只需在代码中使用即可

echo \app\components\widgets\Maps\MapPicker::widget([
    'apiKey'=>'gmaps-api-key' //required,
    'search'=>'Madrid, Spain' //required
]);

必需参数

• apiKey：谷歌地图API密钥，您可以通过以下说明获取此处（仅在将loadMapApi设置为true时必需）。
• search：用于启动地图的搜索字符串，例如Madrid, Spain。也可以是坐标（40.4525784,-3.6813066）。

可选参数

• loadMapApi：如果设置为false，则不会在您已经包含Google Maps JS API的情况下加载它（默认：true）。
• mapId：地图的ID，如果留空，则将自动生成。
• width：地图的宽度（默认：100）。
• height：地图的高度（默认：100）。
• latFieldClass：包含纬度输入字段的DOM元素类（默认：field-lat）。
• lngFieldClass：包含经度输入字段的DOM元素类（默认：field-lng）。
• errorClass：包含错误信息的DOM元素类，如果未找到结果（默认：search-error）。
• errorMsg：在未找到结果时显示的错误信息（默认：没有找到结果）。
• 搜索字段:
  • inputClass：包含搜索字符串的输入字段（默认：search-field）。
  • buttonClass：启动搜索的按钮（默认：btn-search）。
• 地图选项:
  • zoom：开始地图时的缩放级别（默认：16）。
  • streetViewControl：启用或禁用街道视图控制（默认：false）。
• show：如果不想让Widget自动加载，则设置为false。
• scriptsPosition：脚本应该加载的位置。有关位置，请参阅yii\web\View常量。

示例

<input name='lat' class='my-lat-field'/>
<input name='lng' class='my-lng-field'/>

echo \app\components\widgets\Maps\MapPicker::widget([
    'apiKey'=>"my-api-key",
    'width'=>'100%',
    'height'=>300,
    'search'=>"Barcelona, Spain",
    'errorMsg'=>"Ey, your search didn't retrieve any results",
    'latFieldClass'=>"my-lat-field"
    'lngFieldClass'=>"my-lng-field"
]);

带有搜索的示例

<input name='search' class='my-search-field'/>
<button class='my-button'>Search</button>

echo \app\components\widgets\Maps\MapPicker::widget([
    'apiKey'=>"my-api-key",
    'width'=>'100%',
    'height'=>300,
    'search'=>"Barcelona, Spain",
    'errorMsg'=>"Ey, your search didn't retrieve any results",
    'searchField'=>[
        'inputClass'=>'my-search-field',
        'buttonClass'=>'my-button'
    ]
]);

事件

在搜索后或在地图上选择地点后，将触发一个事件，该事件包含搜索结果，事件是mappicker-searchresults。结果包含所有结果和组件（国家、州、省和地区）。

示例

$(document).on('mappicker-searchresults', function(evt, data){
    console.log(data.results);
    console.log(data.components);
})