Fatal编程技术网
  • javascript/
  • Javascript google maps api v3动态标记，有助于让数组正常工作

Javascript google maps api v3动态标记，有助于让数组正常工作

javascript arrays google-maps-api-3

Javascript google maps api v3动态标记，有助于让数组正常工作,javascript,arrays,google-maps-api-3,markers,Javascript,Arrays,Google Maps Api 3,Markers,我正在尝试使用javascript api v3创建一个google地图。我不是最擅长阵列的。标记从另一个搜索中动态拉入，并以这种格式输出搜索结果。现在我需要它采用这种格式，并将其输出到地图上的多个标记。我在正确输出数组时遇到问题。这是我希望从数组输出的格式。。。任何帮助都将不胜感激 var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052,

我正在尝试使用javascript api v3创建一个google地图。我不是最擅长阵列的。标记从另一个搜索中动态拉入，并以这种格式输出搜索结果。现在我需要它采用这种格式，并将其输出到地图上的多个标记。我在正确输出数组时遇到问题。这是我希望从数组输出的格式。。。任何帮助都将不胜感激

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>


var位置=[]；
var iIndex=0；
var markers=document.getElementsByTagName（“标记”）；
//风险值位置；
对于（var i=0；i
首先，这里的位是完全冗余的：

for (var i = 0; i < markers.length; i++) {
          iIndex = i+1;
  }
 // String[] locations = new String[];
    locations.length = iIndex;
在填充数组之前，不必预定义数组的长度

您可能遇到的一个问题是，使用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>


函数初始化（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：新google.maps.LatLng（40.1957，-76.0134），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记；
变量位置={}；
var markers=document.getElementsByTagName（“标记”）；
对于（var i=0；i
<!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>