为什么 Google Maps API 拒绝绘制我的折线数组？答案

【问题标题】：Why is Google Maps API refusing to plot my Polyline array?为什么 Google Maps API 拒绝绘制我的折线数组？
【发布时间】：2011-05-26 21:58:09
【问题描述】：

我认为问题与我如何为折线构建路径数组有关，但必须有一种方法可以做到这一点。目标是从名为“address[]”的数组输入字段创建地理编码位置数组。通过这样做，我已经让折线工作了：

// ARRAY
var linePath = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];

// console.log(linePath);
[P { Ia=37.772323, Ja=-122.21489700000001}, P { Ia=21.291982, Ja=-157.82185600000003}, P { Ia=-18.142599, Ja=178.43100000000004}, P { Ia=-27.46758, Ja=153.02789200000007}]

但是当我尝试从 $.each 语句创建一个数组时，该数组会以不同的方式出现并且不起作用。这是我写的代码：

// ARRAY
$("input[name='submit']").click(function() {
    var geocoder = new google.maps.Geocoder();
    locations = new Array();
    $("input[name='address[]']").each(function() {
        geocoder.geocode({"address" : this.value }, function(results) {
            var addrLl = results[0].geometry.location;
            locations.push(addrLl);
            var marker = new google.maps.Marker({
                map: map,
                position: addrLl
            });
        });
    });

    var connect = new google.maps.Polyline({
        path: locations,
        strokeColor: "#FF0000",
        strokeOpacity: 1.
    });
    connect.setMap(map);
    return false;
});

// console.log(locations);
[]
   [+] 0    P { Ia=41.8843266, Ja=-78.79295300000001}
   [+] 1    P { Ia=35.9614504, Ja=-79.04755590000002}

有什么想法我应该怎么做？

【问题讨论】：

您能澄清一下“数组的输出方式不同”是什么意思吗？它是怎么出来的？这与您的预期有何不同？
抱歉没有更清楚。我已经编辑了帖子并添加了控制台输出。
啊，这很有帮助。左侧的 + 号是否意味着您可以展开某些内容以显示更多信息？
是的。要了解 results[0] 数组包含的内容，您可以访问此网站：code.google.com/apis/maps/documentation/geocoding/#JSON
如果在第二个示例中使用locations.push(addrLl); 而不是locations.push(addrLl.toString());，您的控制台输出是什么？

标签： jquery google-maps-api-3 geocode google-geocoder

【解决方案1】：

地理编码是异步的 - 您的结果可能在您构建折线时尚未返回，因此不会包含在折线中。当地理编码器确实返回时（可能最多一秒钟后），该点将被添加到位置，因此您在控制台记录数组时会看到它，但折线不会知道它。

幸运的是，Maps API 有一个巧妙的解决方案，那就是使用 MVCArray。替换：

locations = new Array();

与

locations = new MVCArray();

现在，每次向数组添加新点时，即使是在您已经创建多边形之后，多边形也会收到通知并更新以包含该点。

【讨论】：