0

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 マップにまったく慣れていないため、このチェックをどこで行うべきか正確にはわかりません。私はいくつかの可能性をいじりましたが、どれもうまくいかないようです。

何かアドバイス？

4

1 に答える 1

1

あなたの sensorList がオブジェクトなのか配列なのかが完全に明確ではないので、最初のアドバイスは、使用しないでください。配列の「for in」構造を使用し、JavaScript で連想配列を作成しないでください。オブジェクトに対してのみ "for in" 構文を保存し、配列に対しては "for" または "while" または "do while" を使用します。私がこれを言う理由は 2 つあります。1 つは、「for in」ループが実際には利用可能なタイプのループの中で最も遅いということです。もう 1 つは、変数タイプの読みやすさのためです (「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 をループして、sensorsObj に既に存在するかどうかによって各センサーを確認します。

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--) {
于 2013-10-24T09:34:40.987 に答える