マーカに基づいて異なるZインデックスを設定するGoogleマップ

Question

Googleマップでイベントに基づいてマーカーを削除しています。これは定期的に発生し、8時間後にマーカーが削除されます。イベントはリアルタイムで表示されますが、24時間の平均でドロップされたマーカーの数は5000から10000の間になります。

1. Blueheadphoneマーカー（のZIndexが、それは関係なく、他のアイコンが地図に表示されたときに他のアイコンの上に示していないような方法で設定する必要があります） - 一定の優先順位5
2. - 矢印と青マーカー（のZIndexのあるべきBlueheadphoneマーカーを除いて他のものの上に表示されるように） - 定数優先度4
3. - ブルーマーカー - 一定の優先順位3
4. - オレンジマーカー - 一定の優先順位2
5. - グリーンマーカー - 一定の優先順位1

だから、あなたの全体像を与えるために、以下のようになります。

私はGoogleマップでそれらを追加してい私はこのようなのZIndexを設定しています：最初のが、それは今1*5 = 5に設定してことになるのZIndexだ後、落下させたと言うので

zindex = intZIndex++ * constantprioirty 
//where intZIndex is int variable initialized with value 1. 

今、明らかにこれはうまく動作しません。 20番目のマーカが落とされ、それがであり、同じ/重複する位置にあると仮定すると、そのzindexは20*2 = 40となり、明らかに5よりも大きいので、はの後になる。

私が試してみたいもう一つのことは、プライム番号をプライオリティとして割り当て、次に優先度^{（index ++）}ですが、これはいつもうまくいくとは思いません。

私は、以下に示すように2次元でそれらをマップし、次にxとyを使用してマップする方法があれば、おそらくのために生成された数が決して任意の数より大きくならないように

のために生成しかし、私はこれを行う方法を確認していません。だから、もしあなたが何かアイデアを持っているなら、私に知らせてください。

Answer 1

私はあなたがarray()オブジェクトのsort()メソッドを実装することが可能な、あなたの多次元events []配列に優先順位とタイムスタンプを提供している前提で、この応答を基づかよ。

以下のコードブロックは、このGoogle MAP APIの例を前提としています。

をevents[]アレイ想定：

var events = [ 
    ['Faneuil Hall, Boston MA', 4, 42.33095, -71.10963, 'January 1, 2016 03:30:00', 3], 
    ['Boston Common, Boston MA', 5, 42.35500, -71.06556, 'February 20, 2016 02:23:00', 5], 
    ['The Paul Revere House, Boston MA', 5, 42.3637351, -71.0558839, 'June 20, 2016 02:24:00', 4], 
    ['Fenway Park, Boston MA', 3, 42.3466803, -71.0994065, 'March 8, 2016 01:20:00', 2], 
    ['Beacon Hill, Boston MA', 2, 42.3583059, -71.0711146, 'April 19, 2016 02:20:00', 1] 
]; 

を今度はタイムスタンプ列（インデックス4）により、次に優先列（インデックス1）にsort()方法の機能発現を起動します。私は、構造のより良い理解のためにコードの対話型と対になったバージョンの両方を含んでいます。時々、三元事業者は、著者とは対照的に、読者のために少し混乱することができる：

sort()方法 - 冗長：

events.sort(function (a, b) { 
    var date1, date2, priority1, priority2; 

    date1 = new Date(a[4]).getTime(); 
    date2 = new Date(b[4]).getTime(); 

    priority = a[1]; 
    priority = b[1]; 

    if (priority1 < priority2) { 
     return 1; 
    } else if (priority1 > priority2) { 
     return -1; 
    } else if (date1 < date2) { 
     return 1; 
    } else if (date1 > date2) { 
     return -1; 
    } else { 
     return 0; 
    } 
}); 

sort()方法 - 縮小さ（三項演算子の使用）。

events.sort(function(a, b) { 
    var date1, date2, priority1, priority2; 

    return priority1 = a[1], 
     priority2 = b[1], 
     date1 = new Date(a[4]).getTime(), 
     date2 = new Date(b[4]).getTime(), 

     priority1 < priority2 ? 1 : priority1 > priority2 ? -1 : date1 < date2 ? 1 : date1 > date2 ? -1 : 0; 
}); 

現在、配列の優先順位が最も高く、最新の配列から配列されているので、次のコード行をfor()ループに挿入してz-インデックスを減らすことができます。

events[i][5] = events.length - [i]; 

以下コードスニペットは、実施例を示しています。また、上記のコードがどのように動作するかを示すためにJSFiddleを含んでいます。私の側から

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: {lat: 42.33196, lng: -71.020173} 
 
    }); 
 
    setMarkers(map); 
 
} 
 

 
var events = [ 
 
    ['Faneuil Hall, Boston MA', 4, 42.33095, -71.10963, 'January 1, 2016 03:30:00', 3], 
 
    ['Boston Common, Boston MA', 5, 42.35500, -71.06556, 'February 20, 2016 02:23:00', 5], 
 
    ['The Paul Revere House, Boston MA', 5, 42.3637351, -71.0558839, 'June 20, 2016 02:24:00', 4], 
 
    ['Fenway Park, Boston MA', 3, 42.3466803, -71.0994065, 'March 8, 2016 01:20:00', 2], 
 
    ['Beacon Hill, Boston MA', 2, 42.3583059, -71.0711146, 'April 19, 2016 02:20:00', 1] 
 
]; 
 

 
events.sort(function (a, b) { 
 
    var date1, date2, priority1, priority2; 
 

 
    date1 = new Date(a[4]).getTime(); 
 
    date2 = new Date(b[4]).getTime(); 
 
    priority1 = a[1]; 
 
    priority2 = b[1]; 
 

 
    if (priority1 < priority2) { 
 
    return 1; 
 
    } else if (priority1 > priority2) { 
 
    return -1; 
 
    } else if (date1 < date2) { 
 
    return 1; 
 
    } else if (date1 > date2) { 
 
    return -1; 
 
    } else { 
 
    return 0; 
 
    } 
 
}); 
 

 
function setMarkers(map) { 
 
    var image = { 
 
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png', 
 
    size: new google.maps.Size(20, 32), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(0, 32) 
 
    }; 
 
    
 
    var shape = { 
 
    coords: [1, 1, 1, 20, 18, 20, 18, 1], 
 
    type: 'poly' 
 
    }; 
 
     
 
    for (var i = 0; i < events.length; i++) { 
 
    events[i][5] = events.length - [i]; 
 
    var beach = events[i]; 
 
    var marker = new google.maps.Marker({ 
 
     position: {lat: beach[2], lng: beach[3]}, 
 
     map: map, 
 
     icon: image, 
 
     shape: shape, 
 
     title: beach[0], 
 
     zIndex: beach[5], 
 
    }); 
 
    } 
 
}

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #C1F0C1; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
} 
 
#pac-input { 
 
    margin: 5px; 
 
    padding: 10px; 
 
}

<body> 
 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
    <div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVcdnzK1fFrT1TXnWt1EPVCQvC2vg_AZY&libraries=places&callback=initMap" async defer></script> 
 
</body>