-2

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

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

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

这是其余的代码：http: //jsfiddle.net/Wkn9v/7/

谢谢！

4

5 回答 5

3

你尝试了什么？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!',
      });
}

也许您在循环中使用相同的纬度/经度？如果是这样，它们在彼此之上，并且看起来像一个标记？

于 2013-01-12T09:33:17.030 回答
2

我修改了您的代码，以便在初始化函数中执行逻辑，否则循环无法正确执行。在错误的地方也有一些其他的东西。这有效：

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/

于 2013-01-12T09:40:13.410 回答
0

如果您有一个要运行的列表，并且您不需要正在使用的列表而是设置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，而不是一个objects 属性。因此，假设您从 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在脚本中与之交互。

于 2013-01-12T09:37:59.870 回答
0

您可以使用这样的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!',
    });
}
于 2013-01-12T09:40:17.790 回答
0

这是您需要做的：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
    });
  }
}

这是它的作用：

  1. 创建以固定位置为中心的地图。
  2. 对于通过 AJAX 获取的每个位置，它都会创建一个新标记。
于 2013-01-12T09:48:31.200 回答