Question

我有一个选择选项如下......

<select multiple id="waypoints" th:field="${deliveries}">
        <option th:each="delivery: ${deliveries}" th:value="${delivery.addresses.street1}" th:text="${delivery.addresses.street1}"></option>
    </select>

我正在创建像这样的标记

var locations = document.getElementById('waypoints');
        var x;


        for (x = 0; x < locations.length; x++) {
            var location = locations.options[x].text
            window.alert(location)
            //LOCATION IS CORRECT
            $.getJSON(
                    'http://maps.googleapis.com/maps/api/geocode/json?address='
                            + location + '&sensor=false', null, function(
                            data) {

                        var p = data.results[0].geometry.location;
                        var latlng = new google.maps.LatLng(p.lat, p.lng);

                        var contentString = location
                        //LOCATION IS ALWAYS THE LAST ONE IN LIST?
                        var infowindow = new google.maps.InfoWindow({
                            content : contentString
                        });

                        var marker = new google.maps.Marker({
                            position : latlng,
                            animation : google.maps.Animation.DROP,
                            map : map,
                        });
                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });
                        gmarkers.push(marker);
                    });
        }

标记是正确创建的，但它们都是相同的内容，这是列表的最后一项。我已经对代码进行了评论以获得更多洞察力。有什么想法吗？

Answer 1

这是因为你的变量的范围不正确。调用回调后，循环结束，location将成为列表中的最后一个。

实现此目的的一种方法是将for - 循环替换为Array.forEach。

Answer 2

我能够用

解决问题

$("#waypoints > option").each(function() {

});

而不是使用for循环。

完整代码

 $("#waypoints > option").each(function() {
            var location = this.text
            $.getJSON(
                    'http://maps.googleapis.com/maps/api/geocode/json?address='
                            + location + '&sensor=false', null, function(
                            data) {

                        var p = data.results[0].geometry.location;
                        var latlng = new google.maps.LatLng(p.lat, p.lng);

                        var contentString = location
                        var infowindow = new google.maps.InfoWindow({
                            content : contentString
                        });

                        var marker = new google.maps.Marker({
                            position : latlng,
                            animation : google.maps.Animation.DROP,
                            map : map,
                        });
                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });
                        gmarkers.push(marker);
                    });

Google Maps API Javascript - 从选择列表中创建标记

2 个答案: