在Javascript中循環播放多個變量

-2

我有一個MySQL數據庫，可以從中獲取數據以在我的Google地圖上顯示標記。我想顯示n個標記，但我不知道如何實現for-loop，以便在Javascript中循環播放多個變量

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

會重複n次。我已經嘗試添加循環功能，但我無法做到。我只是開始學習JavaScript。

下面的代碼的其餘部分：http://jsfiddle.net/Wkn9v/7/

謝謝！

來源

2013-01-12 alesko007

您的'myLatlng'定義在哪裏？ – ATOzTOA

最好包括*什麼都行不通*所以答案可以幫助解釋你做錯了什麼。否則，這只是「哦，你可以這樣或那樣」，但最終你可能並不清楚。 –

我修改了你的代碼，以便在初始化函數中執行邏輯，否則循環無法正常執行。還有一些其他的東西也在錯誤的地方。這工作：

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-12 09:40:13

這工作完美！非常感謝！ – alesko007

Martin，我對代碼做了一些改進。如果您不同意，請隨時恢復，但@ alesko007，我在http://jsfiddle.net/userdude/Wkn9v/13/的編輯代碼中演示如何範圍變量的使用方法，使用'data.length'的引用在循環中，每次迭代都不重新計算'data.length'（因此long表中的性能會受到影響），並且在你的對象字面值上修正尾部的'，'（我有點死於死亡的尾隨逗號*前段時間，我還在恢復中，除IE6之外的大多數瀏覽器都不在乎）。我很有興趣看到它在行動。 –

一切都好！樂於幫助。 –

你試過了什麼？ 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-12 09:33:17

沒有看到OPs for'loop「嘗試」有點讓人很難弄清楚它爲什麼不起作用。我想我們只是展示一個'for'循環的作品。咩。 –

這就是爲什麼我告訴OP發佈他們的代碼，並猜測它可能有什麼問題。 OP的代碼已經有了一個for循環，所以他們至少可以使用它。 –

我並沒有被批評，只是在提問的方式上有點不安。無論如何，看起來我們都很喜歡這首歌。好吧。 '：）' –

如果你有一個需要通過的列表，並且你不需要你正在使用的列表，但是要設置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-12 09:37:59

爲什麼修改數組只是爲了迭代它？不必要的工作，使代碼難以閱讀，特別是當OP詢問循環時 –

@JuanMendes - 爲什麼修改數組只是爲了迭代它...？你的意思是我創建的數組來演示隊列嗎？特別是因爲接受的答案顯示「數據」就像是一個隊列，我認爲這是相關的（我在答案的文字中註明了這一點）。我只是認爲'while'通常不那麼冗長，更具直接代表性，或者更快（在某些情況下），所以我喜歡將它作爲一個選項。 –

在這種情況下，它肯定很慢，因爲'shift'必須更新數組中每個元素的索引。我只是想，如果你不需要修改某些東西的狀態，你就不應該這樣做，這樣就不太可能在未來需要改變。我不明白這是一個「隊列」，你從來不會向它推送任何東西。 –

您可以使用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-12 09:40:17 ATOzTOA

這裏就是你需要做的：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提取的每個位置，它會創建一個新標記。

來源

2013-01-12 09:48:31

在Javascript中循環播放多個變量

回答

相關問題