Question

我有一个MySQL数据库，我从中获取数据以在我的Google地图上显示标记。我想显示n个标记但我不知道如何实现for循环以便

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
});

会重复n次。我已经尝试添加for循环功能，但我无法做到正确。我只是开始学习JavaScript。

以下是代码的其余部分：http://jsfiddle.net/Wkn9v/7/

谢谢！

Answer 1

你尝试了什么？ for循环工作正常http://jsfiddle.net/Wkn9v/3/

for(var i=0; i < 3; i++) {
      var myLatlng = new google.maps.LatLng(-25.363882 + i/2, 131.044922);
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!',
      });
}

也许你在循环中使用相同的纬度/经度？如果是这样，它们就会相互叠加，看起来像一个标记？

Answer 2

我修改了你的代码，所以逻辑在initialize函数中执行，因为否则循环没有正确执行。在错误的地方也有其他一些东西。这有效：

jQuery(function ($) {
  var map_canvas = document.getElementById('map_canvas');

  $.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function (data) {
    initialize(data);
  });

  function initialize(data) {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922),
      mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(map_canvas, mapOptions),
      pos, lat, lng, latlang, marker;

    for (var i = 0, l = data.length; i < l; i++) {
      localStorage.loc = data[i].location;

      pos = localStorage.loc.split(",");
      lat = parseFloat(pos[0]);
      lng = parseFloat(pos[1]);

      latlang = new google.maps.LatLng(lat, lng);

      marker = new google.maps.Marker({
        position: latlang,
        map: map,
        title: 'Hello World!' // <<< Keep in mind that trailing , that was here is unnecessary
      });
    }
  }

});

http://jsfiddle.net/userdude/Wkn9v/13/

Answer 3

如果你有一个要运行的列表，并且你不需要你正在使用的列表但是要设置markers或诸如此类的东西，你可以使用迭代列表的基于队列的方法直到列表为空：

jQuery(document).ready(function ($) {
  (function initialize() {
    var pos = localStorage.loc.split(","),
      lat = parseFloat(pos[0]),
      lng = parseFloat(pos[1]),
      myLatlngs = [
        new google.maps.LatLng(-25.0, 131.0),
        new google.maps.LatLng(-26.0, 132.0),
        new google.maps.LatLng(-24.0, 130.0)
      ],
      myLatlngs,
      mapOptions = {
        zoom: 4,
        center: myLatlngs[0],
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    while (myLatlng = myLatlngs.shift()) {
      new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
      });
    }
  })();
});

http://jsfiddle.net/userdude/Wkn9v/9/

这里的“列表”我指的是array，而不是object的属性。因此，假设您从fetch脚本中获得了以下内容：

data = [
  {"id":"1","published":"yes","location":"-25.363882,131.044922"},
  {"id":"2","published":"yes","location":" -24.96614015991296, 139.7900390625"},
  {"id":"3","published":"yes","location":"-28.76765910569124, 128.3203125"}
];

while (localStorage.loc = data.shift()) {
  pos = localStorage.loc.location.split(",");
  lat = parseFloat(pos[0]);
  lng = parseFloat(pos[1]);

  latlang = new google.maps.LatLng(lat, lng);

  marker = new google.maps.Marker({
    position: latlang,
    map: map,
    title: 'Hello World!'
  });
}

我不确定你在这里使用localStorage.loc做什么，因为你每次都会覆盖它。如果省略它，则可以设置while (pos = ...location.split(','))。只取决于您正在做什么以及如何在您的脚本中与data进行互动。

Answer 4

您可以像这样使用for循环：

var myLatlng = [
    new google.maps.LatLng(-10.0, 10.0),
    new google.maps.LatLng(-10.2, 10.0),
    new google.maps.LatLng(-10.0, 10.2)
    ];

var marker;

for(var i = 0; i < myLatlng.length; i++) {
    marker = new google.maps.Marker({
        position: myLatlng[i],
        map: map,
        title: 'Hello World!',
    });
}

Answer 5

以下是您需要做的事：http://jsfiddle.net/Wkn9v/10/

代码非常简单：

function initialize(data) {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 4
  });

  var length = data.length;

  for (var i = 0; i < length; i++) {
    var loc = data[i].location;
    var pos = loc.split(",");
    var lat = +pos[0];
    var lng = +pos[1];

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map
    });
  }
}

以下是它的作用：

创建以固定位置为中心的地图。
对于通过AJAX获取的每个位置，它会创建一个新标记。

循环使用Javascript，多个变量

5 个答案: