Question

我的目标是让几个输入字段具有自动填充功能，每个输入都会在地图上生成一个标记。然后我需要放大地图以包含所有标记。我有部分工作，没有自动完成功能。我尝试将Google Maps API地方自动填充代码添加到我的for循环中，但无济于事。它为所有输入字段提供自动完成功能，但仅为最后一个输入放置标记。

感谢任何帮助/见解/指导。

这是我的代码，自动填充功能目前已删除，因为我无法使其正常工作。

<div class="container-fluid">
      <div class="row-fluid">
        <div class="span4 well">
            <div id="locations">
                <form>
                    <label>Location 0</label>
                    <input id="address0" type="text" size="50" >
                    <button id="clearField0">Clear</button>

                <div class="panel">
                    <label>Location 1</label>
                    <input id="address1" type="text" size="50">
                    <button id="clearField0">Clear</button>
                </div>
                <div class="panel">
                    <label>Location 2</label>
                    <input id="address2" type="text" size="50">
                    <button id="clearField0">Clear</button>
                </div>
                </form>
            </div>
            <button id="addField">+</button>
            <button id="deleteField">-</button>
            <button id="submit">Submit form</button>
        </div>
        <div class="span8">
            <div id="map-wrapper">
                <div id="google-map"></div>
            </div>
        </div>
      </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtNo_o0u8wYeqgiFF-KpvAtEy18T-PvAo&sensor=false&callback=createMap"></script>

    <script type="text/javascript">

        var inputFields = parseInt($('form input').size());
        var markers = [];


        var createMap = function() {
            var latlngbounds = new google.maps.LatLngBounds();
            var geocoder = new google.maps.Geocoder();

            var myOptions = {
                center : new google.maps.LatLng(35.9081, -78.8628), //center to RTP
                zoom   : 12,
                zoomControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },

            map = new google.maps.Map(document.getElementById("google-map"), myOptions);

            $("#submit").on("click", function() {
                setAllMap(null);
                markers.pop();
                for (i=0; i<inputFields; i++) {
                    var location = $("#address" + i).val();
                    geocoder.geocode( {'address': location}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });
                            latlngbounds.extend(results[0].geometry.location);
                            map.fitBounds(latlngbounds);
                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });
                };
            });

            function setAllMap(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);
                }
            }

            $('#addField').click(function(){        //add input field to bottom of form
                $('form').append('<div class="panel"><label>Location '+ inputFields +'</label><input id="address'+ inputFields +'" type="text" size="50"><button id="clearField'+ inputFields +'">Clear</button></div>');
                inputFields++;
            });

            $('#deleteField').click(function(){     //delete last input field
                $('.panel').last().remove();
                inputFields--;
            });

        };



      </script>

Answer 1

我的第一个问题是在API参考中包含了places库。接下来，我只需要来自Google的Google地方自动填充示例页面的两行代码，而不是他们提供的整个脚本：

var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);

我的for循环中的这两行解决了这个问题。再次感谢Molle博士，他的评论让我重新思考我需要的代码。

自动填充会生成多个标记

1 个答案: