为什么 Google Maps API 拒绝绘制我的折线数组？
我认为这个问题与我如何为折线构建路径数组有关，但必须有一种方法可以这样做。目标是从名为“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}
有什么想法我应该做什么吗？
I think the problem has something to do with how I am building the path array for my Polyline but there has to be a way to do it like this. The goal is to create an array of Geocode locations from an array input fields named "address[]". I've gotten the Polyline to work by doing this:
// 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}]
But when I try to create an array from an $.each statement, the array comes out differently and doesn't work. Here is the code I have written:
// 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}
Any ideas what I should do?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
地理编码是异步的 - 在构造折线时您的结果可能尚未返回，因此不会包含在折线中。当地理编码器确实返回时（可能最多一秒后），该点将被添加到位置，因此当您控制台记录数组时您将看到它，但折线不会知道它。
幸运的是，Maps API 有一个巧妙的解决方案，那就是使用 MVCArray。 Replace:
为
Now，每次向数组添加新点时，即使是在您已经创建多边形之后，多边形也会收到通知并更新以包含该点。
Geocoding is asynchronous - your results may not have returned by the time you construct the polyline so will not be included in the polyline. When the geocoder does return (possibly up to a second later) the point will be added to locations, so you will see it when you console log the array, but the Polyline will not know about it.
Luckily the Maps API has a neat solution to this which is to use an MVCArray. Replace:
with
Now, each time you add a new point to the array, even if it is after you have already created the polygon, the polygon will be notified and will update to include the point.