顯示在google地圖中parse.com的所有地點

Question

我想從parse.com中的一個類中提取所有的地點並將它們顯示爲Google地圖中的標記。 （大約只有1 geoipoin，緯度經度，工作就像一個魅力所以這裏是代碼）

function businessProfile(uid) { 
     Parse.initialize("APPID", "JSKEY"); 
     var bprofile = Parse.Object.extend("magazia"); 
     var query = new Parse.Query(bprofile); 
     query.notEqualTo("objectId", null); 
     query.find({ 
      success: function(results) { 
      for (var i = 0; i < results.length; i++) { var object = results[i]; 
        var locationsBlock = {}; 
        locationsBlock = JSON.parse(JSON.stringify(object)); 
        var location = {}; 
        location = JSON.parse(JSON.stringify(locationsBlock.latlon)); 
        var lat = location.latitude; 
        var lon = location.longitude; 
        var magname = object.get('name'); 
        setData(magname, lat, lon); 
       } 


      }, 
     error: function(error) { 

       alert("Error: " + error.code + " " + error.message); 
      } 
     }); 
    } 

與上面的代碼我得到的16個不同的行中的所有的geopoints和我推動它們到一個數組

所以（ⅰ希望我做得很好），哪個數組聲明在函數之外，因爲我在下面的地圖初始化函數中再次調用它。

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 3, 
    center: {lat: 34.9, lng: 111.2} 
    }); 

    setMarkers(map); 
} 
function setData(magname, lat, lon){ 
    var arlat = []; 
arlat.push(magname, lat, lon); 
console.log(arlat); 
} 
function setMarkers(map) { 

    for (var i = 0; i < arlat.length; i++) { 
    var arlat = arlat[i]; 
    var marker = new google.maps.Marker({ 
     position: {lat: arlat[1], lng: arlat[2]}, 
     map: map, 
     title: arlat[0] 

    }); 
    } 
} 

所以，現在我堅持如何將每個地址點放入帶有標記的地圖。 我知道它與「for循環」有關，但我被困在那裏。現在它只顯示列表標記中的第一個，並且我想將它們全部顯示出來。

UPDATE

所以在我的代碼一個更新我已經成功地通過了所有我從我在解析類得到的名稱和緯度經度，現在我把它們放在function setData()

現在的問題是，我怎麼能通過在setMarkers() arlat陣列，因爲setMarkers函數採取從initMap()map變量，我希望它也採用setData()功能arlat陣列，所以我可以打印在正確的部分拉特lon和名字？這裏的console.log(arlat)

Answer 1

預覽反而推三個變量：

arlat.push(magname, lat, lon); 

你或許應該push的對象，像這樣：

arlat.push({lat: lat, lon: lon}); 

那麼我們只需要遍歷引腳（你可以用for循環來做，但forEach可能更簡單，因爲y OU沒有索引到數組，只需使用接受陣元）的回調函數...

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: iconBase + 'marker.png', 

    title: 'Hello World!' 
}); 
arlat.forEach(function(positionObject) { 
    var pin = new google.maps.Marker({ 
     position: { 
      lat: positionObject.lat, 
      lon: positionObject.lon 
     }, 
     map: map, 
     //title: positionObject.title, //if title property is set above 
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00ff00' //green pin, more available 
    }); 
}); 

這是否對你的工作？有關圖標的更多信息，檢出google maps API（你可能已經看了）

UPDATE - 根據您的更新，我注意到您在重新分配arlat的價值，這與在foreach迭代衝突。我已經改變它使用對象，而不是覆蓋數組對象 - 請參閱this plunkr或下面的代碼片段。

function initialize() { 
 
    var arlat = []; 
 
    setData('a', 34.0, 111.2); 
 
    setData('v', 30.1, 116.3); 
 
    initMap(); 
 

 
    function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 3, 
 
     center: { 
 
     lat: 34.9, 
 
     lng: 111.2 
 
     } 
 
    }); 
 
    setMarkers(map); 
 
    } 
 

 
    function setData(magname, lat, lon) { 
 
    //notice how we name the properties below: name, lat, lon - these are referenced down below in setMarkers() 
 
    arlat.push({ 
 
     name: magname, 
 
     lat: lat, 
 
     lon: lon 
 
    }); 
 
    } 
 

 
    function setMarkers(map) { 
 
    for (var i = 0; i < arlat.length; i++) { 
 
     var marker = new google.maps.Marker({ 
 
     position: { 
 
      lat: arlat[i].lat, 
 
      lng: arlat[i].lon 
 
     }, 
 
     map: map, 
 
     title: arlat[i].name 
 
     }); 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 90%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="map"></div>