提供我的谷歌地图的纬度和经度列表,用标记可视化它们

时间:2012-12-20 23:06:57

标签: javascript google-maps-api-3

在我的项目中,我有一个包含纬度和经度列表的数据库,对应于几个地址,我想从这个数据库中取出它们并将它们传递给一个javascript代码,该代码将在地图中显示所有这些地址标记。到目前为止,我从数据库中获得了所有列表。通过使用它的纬度和经度,我能够在地图中可视化一个且只有一个地址。所以我现在正在努力解决多个地址问题。这是我到目前为止提出的代码:

      function initialize() {
          var myLatlng = new google.maps.LatLng(locations[0], locations[1]);
          var myOptions = {
              zoom: 4,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map"), myOptions);
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: "Fast marker"
          });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

位置是我的纬度和经度列表,它是这样的:

locations[0]: latitude 1  
locations[1]: longitude 1  
locations[2]: latitude 2  
locations[3]: longitude 2    etc..

现在我知道应该有某种循环,但我无法做到。

提前致谢!

P.S:这是我的第一个问题,所以不要判断我的接受率! :)

4 个答案:

答案 0 :(得分:2)

您只需编写for循环,如下所示:

function initialize() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(locations[0], locations[1]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  for (var i = 0, ln = locations.length; i < ln; i += 2) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i], locations[i + 1]);
      map: map,
      title: "Fast marker"
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);​

答案 1 :(得分:1)

您可以将简单的for循环写入iterate through locations。一次增加两个:

var map = new google.maps.Map(document.getElementById("map"), myOptions);

for (var i=0 ; i < locations.length-1 ; i+=2) {

    var lat = locations[i];
    var lng = locations[i+1];

    var myLatlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
          zoom: 4,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: "Fast marker"
    });
}

答案 2 :(得分:1)

我得到了解决方案。如果以后有人需要它,那么代码是:

    function initialize() {
    console.log('hi');
  var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(locations[0], locations[1]),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);
    for (var i = 0, ln = locations.length; i < ln; i += 2) {
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i], locations[i + 1]),
          map: map,
          title: "Fast marker"
      });
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

答案 3 :(得分:0)

如果你有一系列的位置,如下面的

var locations = [
    [33.890542, 150.274856],
    [36.923036, 152.259052],
    [38.028249, 154.157507]
];

然后您可以使用以下代码

function initialize() {
    var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
    var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    for(var i=0;i<locations.length;i++)
    {
        var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "marker : "+(i+1)
        });
    }     
}
google.maps.event.addDomListener(window, 'load', initialize);

Working Example。 您可能需要/喜欢与其他Google地图相关的answers here