README

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

安装

此包与 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' ]

使用

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

$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) 作为主要作者。