Javascript中的循环，多变量

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

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

将重复n次。我已经尝试添加for循环函数，但无法正确地进行。我才刚刚开始学习JavaScript

下面是代码的其余部分：

---

谢谢大家!

你尝试了什么？for循环工作正常

for（变量i=0；i<3；i++）{
var mylatng=new google.maps.LatLng（-25.363882+i/2131.044922）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好，世界！”，
});
}

---

也许你在循环中使用了相同的纵横比？如果是这样，它们彼此重叠，看起来像一个标记？

如果您有一个列表要运行，并且您不需要正在使用的列表，但要设置

标记或诸如此类，您可以使用基于队列的方法在列表上迭代，直到列表为空：

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!'
      });
    }
  })();
});


这里的“列表”指的是
数组
，而不是
对象的属性。因此，假设您从获取脚本中获得以下内容：

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
，因为您每次都会覆盖它。如果省略它，可以改为使用可能的set。这取决于您正在执行的操作以及脚本中数据的交互方式。
我修改了您的代码，以便在初始化函数中执行逻辑，否则循环无法正确执行。还有其他一些东西放错地方了。这项工作：

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
      });
    }
  }

});

jQuery（函数（$）{
var map_canvas=document.getElementById（'map_canvas'）；
$.getJSON（'http://www.wawhost.com/appProject/fetchmarker.php?callback=?，函数（数据）{
初始化（数据）；
});
函数初始化（数据）{
var mylatng=new google.maps.LatLng（-25.363882131.044922），
映射选项={
缩放：4，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
},
map=新的google.maps.map（地图画布，地图选项），
pos、lat、lng、latlang、标记器；
对于（变量i=0，l=data.length；i标题：“Hello World！”//您可以使用
来执行以下循环：

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!',
    });
}

var mylatng=[
新的google.maps.LatLng（-10.0,10.0），
新的google.maps.LatLng（-10.2,10.0），
新的google.maps.LatLng（-10.0,10.2）
];
var标记；
对于（变量i=0；i
以下是您需要执行的操作：

代码非常简单：

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
    });
  }
}

函数初始化（数据）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（-25.363882131.044922），
mapTypeId:google.maps.mapTypeId.ROADMAP，
缩放：4
});
变量长度=data.length；
对于（变量i=0；i

它的作用如下：

创建以固定位置为中心的地图
对于通过AJAX获取的每个位置，它都会创建一个新的标记
你的
myLatlng
定义在哪里？最好包括那些不起作用的内容，这样答案就可以帮助解释你做错了什么。否则，它只是“哦，你可以这样做，也可以那样做”，但最终对你来说可能不太清楚。没有看到OPs
for
循环“尝试”有点让人难以理解它为什么不起作用。我想我们只是在演示一个
for
循环的工作原理。嗯。这就是为什么我让OP发布他们的代码，并猜测它可能有什么问题。OP的代码已经有了一个for循环，所以他们至少可以使用它。我不是在批评，只是对他们的方式有点不安有人问了一个问题。看来我们俩都走上了正轨。哦，好吧。
：）
这非常有效！非常感谢！Martin，我对代码进行了一些增强。如果您不同意，请随时回复，但是@alesko007，我在编辑的代码中演示了如何定义变量的范围，在循环中使用
数据的引用。长度
因此
数据。每次迭代都不会重新计算长度（因此对长列表的性能有很大影响），并修复了对象文本的尾部
，
（不久前，我被尾部的死亡逗号弄得有些僵硬，我还在恢复中，除IE6之外的大多数浏览器都不在乎）。我很有兴趣看到它的实际应用。很好！很高兴能提供帮助。@JaredFarrish谢谢你，我格式化它的方式有点混乱。更改很好，也谢谢你将它链接到JSFIDLE。我确实想演示的一件事是对
document.getElementById（'map_canvas'）的范围引用
getElementById
速度很快，但最好将其缓存在调用范围内或调用范围之上，尤其是当有1000个数据点要绘制或其他什么的时候。为什么要修改数组只是为了对其进行迭代？不必要的工作会使代码更难读取，特别是在OP请求时loops@JuanMendes-为什么只修改数组to迭代它…？你是指我创建的用于演示队列的数组？特别是因为接受的答案显示
数据
类似于队列，我认为它是相关的（我在答案的文本中注意到）。我只是认为
而
通常较少
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
    });
  }
}