单击添加按钮时添加多个 google 地图

Question

我正在使用 Symfony 2.3、twig 和这个插件 location picker 来显示地图。我嵌入了一组地址。每个地址表都有一张地图。用户可以手动添加地址表。然后 google 地图可以正确显示第一个地址，但是添加第二个地址时地图不会显示。 chrome 控制台不显示任何错误。

vigilance_point_collection-prototype.html.twig 文件:

{% block vigilance_point_collection_widget %}
    {% spaceless %}
        {# <style>
             .remove{
                 position: absolute;
                 top: -36px;
                 right: -48px;
             }
            /* .element-div{
                 display: inline-block;
                 margin-bottom: -10px;
                 position: relative;
             }*/
         </style>#}
        <div class="collection">
            {% if prototype is defined %}
                {% set attr = attr|merge({'data-prototype': block('vigilance_point_collection_item_widget') }) %}
            {% endif %}
            <div {{ block('widget_container_attributes') }}>
                {{ form_errors(form) }}
                {% for rows in form %}
                    <div class="element-div">
                        {% set fieldNum = 1 %}
                        {% for row in rows %}
                            <div class="form-group field{{ fieldNum }}">
                                {{ form_label(row) | trans | raw }}
                                {{ form_errors(row) }}
                                <div class="col-lg-10">
                                    {{ form_widget(row) }}
                                </div>
                            </div>
                            {% set fieldNum = fieldNum + 1 %}
                        {% endfor %}
                        <a class="remove btn" title="Supprimer" href="javascript:void(0)">
                            <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/24/delete-1-icon.png">
                        </a>
                        <div class="clear"></div>
                    </div>
                {% endfor %}
                {{ form_rest(form) }}
            </div>
            <div class="clear"></div>
            <a class="add{{ id }}" title="{{ 'button.add' | trans | capitalize }}" href="javascript:void(0);">
                <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/24/add-1-icon.png">
            </a>
        </div>
        <script type="text/javascript">
            var elementCount{{ id }} = '{{ form | length }}';
            jQuery(document).ready(function () {
                jQuery('.add{{ id }}').click(function () {
                    var elementList = jQuery('#{{ id }}');
                    var newWidget = elementList.attr('data-prototype');
                    newWidget = newWidget.replace(/{{ form.vars.name }}___name__/g, "{{ form.vars.name }}_" + elementCount{{ id }});
                    newWidget = newWidget.replace(/{{ form.vars.name }}]\[__name__/g, "{{ form.vars.name }}][" + elementCount{{ id }});
                    elementCount{{ id }}++;
                    jQuery('#{{ id }}').append(newWidget);
                    $('#us3').locationpicker({
                        location: {latitude: 46.15242437752303, longitude: 2.7470703125},
                        inputBinding: {
                            latitudeInput: $('#mybook_adminbundle_outlet_addresses_0_latitude'),
                            longitudeInput: $('#mybook_adminbundle_outlet_addresses_0_longitude'),
                            radiusInput: $('#mybook_adminbundle_outlet_addresses_0_phone'),
                            locationNameInput: $('#mybook_adminbundle_outlet_addresses_0_location')
                        },
                        enableAutocomplete: true,
                        onchanged: function (currentLocation, radius, isMarkerDropped) {
                            // Uncomment line below to show alert on each Location Changed event
                            //alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
                        }
                    });
                    return false;
                });
            });
            jQuery(document).ready(function () {
                jQuery('.remove').livequery('click', function (e) {
                    jQuery(this).parent('.element-div').fadeOut().remove();
                    return false;
                });
            });
        </script>  
    {% endspaceless %}
{% endblock vigilance_point_collection_widget %}

{% block vigilance_point_collection_item_widget %}
    {% spaceless %}
        {% set fieldNum = 1 %}
        <div class="element-div collection">
            <div id='us3' style='width: 550px; height: 400px;'></div>
            {% for row in prototype %}
                <div class="form-group">
                    {{ form_label(row) | trans | raw }}
                    {{ form_errors(row) }}
                    <div class="col-lg-10">
                        {{ form_widget(row) }}
                    </div>
                </div>
                {% set fieldNum = fieldNum + 1 %}
            {% endfor %}
            <a class="remove btn" title="Supprimer" href="javascript:void(0);">
                <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-1/24/delete-1-icon.png">
            </a>
        </div>
    {% endspaceless %}
{% endblock vigilance_point_collection_item_widget %}

Answer 1

我猜的问题在这里：

$('#us3').locationpicker({

... 

<div id='us3' style='width: 550px; height: 400px;'></div>
{% for row in prototype %}

所以您有一个 div 正在将地图加载到其中。您可能需要在每个地址的不同 div 上调用 .locationpicker() 构造函数，并在 for 循环中为每个地址创建一个唯一命名的 div。例如

$('#us{{ id }}').locationpicker({

... 

{% for row in prototype %}
    <div id='us{{ id }}' style='width: 550px; height: 400px;'></div>

单击添加按钮时添加多个 google 地图

Add multiple google maps when i click add button

jquery

google-maps

symfony

twig