README

使用谷歌地图在表单上设置纬度和经度值。地图包括一个搜索字段和当前位置链接。当在地图上放置或拖动标记时，纬度和经度字段将更新。

安装

此包与Symfony 3和4兼容。使用composer进行安装

composer require krixer/google-map-form-type-bundle

在您的 config/bundles.php 中注册此包

// config/bundles.php
return [
    // ...
    Oh\GoogleMapFormTypeBundle\OhGoogleMapFormTypeBundle::class => ['all' => true],
];

在 config/packages 目录中创建选项文件

# config/packages/oh_google_map_form_type.yaml
oh_google_map_form_type:
    api_key: "%google_maps_api_key%"

使用方法

此包包含一个新的FormType，称为GoogleMapType，可以在表单中使用，如下所示

$builder->add('latlng', GoogleMapType::class);

在您的模型中，您必须处理纬度和经度数组

// Your model eg, src/My/Location/Entity/MyLocation.php
use Oh\GoogleMapFormTypeBundle\Traits\LocationTrait;


class MyLocation
{
    // ... include your lat and lng fields here using LocationTrait
    use LocationTrait;

}

包含布局的twig模板。通常，最好在您的twig模板中覆盖表单模板

# your config.yml
twig:
    form_themes:
        # This uses the default - you can put your own one here
        - 'OhGoogleMapFormTypeBundle:Form:fields.html.twig'

如果您打算覆盖模板中的某些元素，可以通过扩展默认的google_maps.html.twig来实现。此示例在新的地图位置被选择时向javascript添加一个回调。

{# your template which is inluded in the config.yml (above) 
   eg src/My/Location/Resources/views/Form/fields.html.twig #}
{% extends "OhGoogleMapFormTypeBundle:Form:google_maps.html.twig" %}
{% block oh_google_maps_callback %}
		<script type="text/javascript">
			var oh_google_maps_callback = function(location, gmap){
                // logs to the console your new latitude
				console.log('Your new latitude is: '+location.lat());
			}
		</script>	
{% endblock %}

选项

有许多选项，大部分都是自我解释的

array(
	'type'           => HiddenType::class,  // the types to render the lat and lng fields as
	'addr_type'      => TextType::class,  // the type to render the address field
	'attr'           => ['class' => 'form-group'],
	'search_enabled' => true,
	'options'        => [], // the options for both the fields
	'lat_options'    => [], // the options for just the lat field
	'lng_options'    => [], // the options for just the lng field
	'addr_options'   => [], // the options for just the addr field
	'lat_name'       => 'latitude',   // the name of the lat field
	'lng_name'       => 'longitude',   // the name of the lng field
	'addr_name'      => 'address',  // the name of the addr field (optional)
	'error_bubbling' => false,		
	'map_width'      => '100%',  // the width of the map
	'map_height'     => '300px', // the height of the map
	'default_lat'    => 41.390205,    // the starting position on the map
	'default_lng'    => 2.154007, // the starting position on the map
	'include_jquery' => false,   // jquery needs to be included above the field (ie not at the bottom of the page)
	'include_gmaps_js'=>true     // is this the best place to include the google maps javascript?
)

屏幕截图

默认表单 当前位置 搜索位置 经纬度验证

已知问题

因为表单类型模板包括javascript，所以还没有办法将其全部组合在页面底部，所以它被包含在字段的底部。这意味着在字段之前需要包含jquery和Resources/public/js中的javascript插件。我不确定有没有解决方法，但我想这将在表单框架的后续版本中得到解决。

致谢

• Ollie Harridge (ollietb) 作为主要作者。
• Hector Escriche (krixer) 作为贡献者。