自動更新標記位置和信息窗口

Question

我正在解析CSV文件，並將線變成地圖上的標記，並在邊欄上帶有相應的按鈕。

我當前創建標記的方法是

var bounds = new google.maps.LatLngBounds();
var sensor, i, latlng;
for (i in sensorList) {
    // Creates a marker
    sensor = sensorList[i];
    latlng = new google.maps.LatLng(sensor.lat, sensor.lng);
    bounds.extend(latlng);
    var marker = createMarker(
        latlng, sensor.name, sensor.reading
    );  

    // Creates a sidebar for the marker
    createMarkerButton(marker);
}

// Fit to map bounds
mapCanvas.fitBounds(bounds);

我的createMarker函數是

function createMarker(latlng, title, html) {
    // Creates a marker
    var marker = new google.maps.Marker({
        position: latlng,
        map: mapCanvas,
        title: title
});
// The InfoWindow is opened when the sidebar button is clicked
        google.maps.event.addListener(marker, "click", function() {
            infoWnd.setContent("<div class = \"PopUp\" style=\"width: 150px; height: 100px;\"<strong>"+title+"</title></strong><br>Latest reading: "+html+"<br><a href=\"\">Full reading</a>");
            infoWnd.open(mapCanvas, marker);
        });
        return marker;
    }

這對於每個傳感器名稱/位置都是唯一的CSV文件非常有用。 我正在嘗試擴展它以支持同一傳感器，該傳感器在CSV文件中存儲多個條目，並且僅為每個傳感器的最新條目創建標記/按鈕。

我相信這樣做的推薦方法是保留一個標記數組，每當我創建一個標記時，都應該與該數組進行比較。 我對Javascript和Google Maps還是很陌生，不確定該檢查應該在哪里進行。 我開玩笑的有幾種可能性，但似乎都沒有用。

有什么建議嗎？

Answer 1

建議的第一句話，是因為我不知道您的sensorList是對象還是數組（我懷疑它是數組？因為我在這里看不到為什么會是對象），所以請不要使用數組上的“ for in”構造，也不會在javascript中創建關聯數組。 僅為對象保存“ for in”構造，並在數組上使用“ for”或“ while”或“ do while”。 我說這有兩個原因，一個是“ for in”循環實際上是可用循環類型中最慢的一個，其次是為了清楚易讀的變量類型（您看到“ for”或“ while”或“ do while”） “循環，您應該能夠知道您正在處理數組，同樣，您會看到“ for in”循環，您應該能夠知道您正在處理對象）。

通常，淘汰具有相同屬性名稱的多個條目的一種好方法是使用一個對象存儲“傳感器”對象名稱的值，然后檢查該對象是否存在相同名稱。 例如，假設您有一個對象數組：

var sensorList = [ //an array of objects
    {name: 'sensorA', propA: 1, propB: 2},
    {name: 'sensorB', propA: 3, propB: 4},
    {name: 'sensorC', propA: 5, propB: 6},
    {name: 'sensorB', propA: 7, propB: 8},
    {name: 'sensorA', propA: 9, propB: 10},
    {name: 'sensorD', propA: 11, propB: 12}
];

然后創建一個可用於過濾現有名稱的對象：

var sensorsObj = {};

現在循環遍歷sensorList，並按sensorObj中已經存在或不存在的名稱檢查每個傳感器：

for (var sensor, i = 0, len = sensorList.length; i < len; i++) {
    sensor = sensorList[i];
    if (!sensorsObj[sensor.name]) {
        sensorsObj[sensor.name] = 1;
        //we know we have not ran across this name yet, so here we can
        //create LatLng's, extend bounds, create markers, yada yada yada
    }
}

現在，不確定您的sensorList中的事物順序是什么，從最舊到最新或從最新到最舊。 如果最早到最新，則可能需要執行以下操作：sensorList = sensorList.reverse（）; 就在“ for”循環之前，以反轉數組的順序。 實際上，既然我這樣說，從數組末尾開始循環實際上會稍微好一些（更快）：

for (var sensor, i = sensorList.length - 1; i >= 0; i--) {