README

这是从ollietb的bundle分支出来的。感谢他。

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

我添加了设置一组两对经纬度以显示两点之间单程的功能。

安装

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

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

在您的app/AppKernel.php中注册该bundle

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

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

将OhGoogleMapFormTypeBundle添加到assetic

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

用法

此bundle包含一个新的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
	'lat_name'       => 'lat',   // the name of the lat field
	'lng_name'       => 'lng',   // the name of the lng field
	'map_width'      => 300,     // the width of the map
	'map_height'     => 300,     // 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)为主要作者。