-2

Googleマップにマーカーを表示するためにデータをフェッチする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ここでの「リスト」とは、プロパティではなく、プロパティを指しobjectます。したがって、フェッチスクリプトから次のようなものが返されると仮定します。

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 に答える