我正在尝试使用 javascript api v3 创建谷歌地图。我不是最擅长数组的。该标签从另一个搜索中动态拉入，并以这种格式输出结果。现在我需要它采用这种格式并将其输出到 map 上的多个标记。我在使数组正确输出时遇到问题。这是我想要从数组输出的格式...任何帮助将不胜感激。
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
我的代码从这里开始
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<markers>
<marker zip="17507" state="Pennsylvania" city="Bowmansville" address="1363 Bowmansville Rd." county="Lancaster" lng="-76.0134" lat="40.1957" html="Reading Equipment & Distribution (Bowmansville)"> </marker>
<marker zip="18071" state="Pennsylvania" city="Palmerton" address="1226 Little Gap Road" county="Carbon" lng="-75.617" lat="40.8083" html="SMF"></marker>
<marker zip="18020" state="Pennsylvania" city="Bethlehem" address="2706 Brodhead Road" county="Northampton" lng="-75.3696" lat="40.6269" html="Versalift East, LLC (Specialty)"></marker>
<marker zip="19720" state="Delaware" city="New Castle" address="203 Pigeon Point Road" county="New Castle" lng="-75.5954" lat="39.6733" html="Auto Port, Inc."></marker>
</markers>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [];
var iIndex=0;
var markers = document.getElementsByTagName("marker");
//var locations;
for (var i = 0; i < markers.length; i++) {
iIndex = i+1;
}
// String[] locations = new String[];
locations.length = iIndex;
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("html");
var address = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var state = markers[i].getAttribute("state");
var zip = markers[i].getAttribute("zip");
var pointlat = markers[i].getAttribute("lat");
var pointlng = markers[i].getAttribute("lat");
locations[i] = [];
locations[i].length = 4;
locations[i][0] = name;
locations[i][1] = pointlat;
locations[i][2] = pointlng;
locations[i][3] = '1';
document.write(locations);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-76.0134,40.1957),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker;
for (var j = 0; j < locations.length; j++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[j][1], locations[j][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, j) {
return function() {
infowindow.setContent(locations[j][0]);
infowindow.open(map, marker);
}
})(marker, j));
}
</script>
</body>
</html>
最佳答案
首先，这里的这一点是完全多余的:
for (var i = 0; i < markers.length; i++) {
iIndex = i+1;
}
// String[] locations = new String[];
locations.length = iIndex;
是这样的:
locations[i].length = 4;
在填充数组之前，您不必预定义数组的长度。
您可能遇到的一个问题是，使用 getAttribute() 读取某些标记的值将返回一个字符串。因此，当您尝试创建标记时，它需要一个 float ，而不是字符串。所以你可以将它们转换为数字，如下所示:
locations[i][1] = parseFloat(pointlat);
locations[i][2] = parseFloat(pointlng);
此外，这可能是您的主要错误，您使用纬度值作为经度坐标!
var pointlng = markers[i].getAttribute("lat");
您在创建 map 时重复出现错误，这些是错误的方法:
center: new google.maps.LatLng(-76.0134,40.1957),
最后，我认为您只需一个循环即可实现所需的所有功能，而不是循环遍历所有标记来填充“位置”，然后再次循环遍历“位置”以创建每个标记。
这是一个适合我的完整解决方案:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(40.1957,-76.0134),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker;
var location = {};
var markers = document.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
location = {
name : markers[i].getAttribute("html"),
address : markers[i].getAttribute("address"),
city : markers[i].getAttribute("city"),
state : markers[i].getAttribute("state"),
zip : markers[i].getAttribute("zip"),
pointlat : parseFloat(markers[i].getAttribute("lat")),
pointlng : parseFloat(markers[i].getAttribute("lng"))
};
console.log(location);
marker = new google.maps.Marker({
position: new google.maps.LatLng(location.pointlat, location.pointlng),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker,location) {
return function() {
infowindow.setContent(location.name);
infowindow.open(map, marker);
};
})(marker, location));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<markers>
<marker zip="17507" state="Pennsylvania" city="Bowmansville" address="1363 Bowmansville Rd." county="Lancaster" lng="-76.0134" lat="40.1957" html="Reading Equipment & Distribution (Bowmansville)"> </marker>
<marker zip="18071" state="Pennsylvania" city="Palmerton" address="1226 Little Gap Road" county="Carbon" lng="-75.617" lat="40.8083" html="SMF"></marker>
<marker zip="18020" state="Pennsylvania" city="Bethlehem" address="2706 Brodhead Road" county="Northampton" lng="-75.3696" lat="40.6269" html="Versalift East, LLC (Specialty)"></marker>
<marker zip="19720" state="Delaware" city="New Castle" address="203 Pigeon Point Road" county="New Castle" lng="-75.5954" lat="39.6733" html="Auto Port, Inc."></marker>
</markers>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>
关于javascript - 谷歌地图 API v3 动态标记，帮助数组正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19775055/