0

我正在尝试使用 javascript api v3 创建一个谷歌地图。我不是最好的数组。该标签从另一个搜索中动态提取并以这种格式输出结果。现在我需要它采用这种格式并将其输出到地图上的多个标记。我在让数组正确输出时遇到问题。这是我希望从数组输出的格式......任何帮助将不胜感激。

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>
4

1 回答 1

2

首先，这里的这一点是完全多余的：

for (var i = 0; i < markers.length; i++) {
          iIndex = i+1;
  }
 // String[] locations = new String[];
    locations.length = iIndex;

就像这样：

 locations[i].length = 4;

您不必在填充之前预定义数组的长度。

您可能遇到的一个问题是，使用 getAttribute() 读取某些标记的值将返回一个字符串。因此，当您尝试创建标记时，它需要一个浮点数，而不是字符串。因此，您可以将它们转换为数字，如下所示：

locations[i][1] = parseFloat(pointlat);
locations[i][2] = parseFloat(pointlng);

此外，这可能是您的主要错误，您使用纬度值作为经度坐标！ 

 var pointlng = markers[i].getAttribute("lat");

您在创建地图时重复错误，这些是错误的方法：

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>
于 2013-11-05T09:22:56.917 回答