README

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

安装

此包与Symfony 2.1兼容。将以下内容添加到您的composer.json

"oh/google-map-form-type-bundle": "dev-master"

在您的app/AppKernel.php中注册包

// app/AppKernel.php
public function registerBundles()
    {
        $bundles = array(
            new Oh\GoogleMapFormTypeBundle\OhGoogleMapFormTypeBundle(),
            // ...

如果您尝试使用Symfony 2.0，可能需要更改一些选项

将OhGoogleMapFormTypeBundle添加到assetic

# app/config/config.yml
# Assetic Configuration
assetic:
    bundles:        [ 'OhGoogleMapFormTypeBundle' ]
    
...

oh_google_map_form_type:
    api_key: "%google_maps_api_key%"

用法

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

$builder->add('latlng', 'oh_google_maps');

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

// Your model eg, src/My/Location/Entity/MyLocation.php
use Symfony\Component\Validator\Constraints as Assert;
use Oh\GoogleMapFormTypeBundle\Validator\Constraints as OhAssert;

class MyLocation
{
    // ... include your lat and lng fields here

    public function setLatLng($latlng)
    {
        $this->setLat($latlng['lat']);
        $this->setLng($latlng['lng']);
        return $this;
    }

    /**
     * @Assert\NotBlank()
     * @OhAssert\LatLng()
     */
    public function getLatLng()
    {
        return array('lat'=>$this->getLat(),'lng'=>$this->getLng());
    }

}

包含布局的twig模板。通常，覆盖您自己的twig模板中的表单模板是个好主意

# your config.yml
twig:
    form:
        resources:
            # 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'           => 'text',  // the types to render the lat and lng fields as
	'options'        => array(), // the options for both the fields
	'lat_options'    => array(), // the options for just the lat field
	'lng_options'    => array(), // the options for just the lng field
	'addr_options'   => array(), // the options for just the addr field
	'lat_name'       => 'lat',   // the name of the lat field
	'lng_name'       => 'lng',   // the name of the lng field
	'addr_name'      => 'addr',  // the name of the addr field (optional)
	'map_width'      => '100%',  // the width of the map
	'map_height'     => '300px', // the height of the map
	'default_lat'    => 51.5,    // the starting position on the map
	'default_lng'    => -0.1245, // 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) 为主要作者。