谷歌地图根据 Marker 设置不同的 z-index

Question

我有一张谷歌地图，我在其中根据事件放置标记，这种情况会定期发生，8 小时后会删除标记。事件是实时的，并且不能保证在 24 小时内平均丢弃的标记数在 5000 到 10000 之间时会出现。为了这个问题，假设我有以下标记：

1. Blueheadphone 标记（zindex 必须设置为显示在任何其他图标之上，无论地图上何时出现其他图标） - 恒定优先级 5
2. - 带箭头的蓝色标记（zindex 应使其出现在除 Blueheadphone 标记之外的其他标记之上）- 恒定优先级 4
3. - 蓝色标记 - 恒定优先级 3
4. - 橙色标记 - 恒定优先级 2
5. - 绿色标记 - 固定优先级 1

所以为了给你完整的图片，它可能如下所示：

当我在 Google 地图中添加它们时，我会像这样设置 zindex：

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

现在显然这不起作用，因为首先说 被删除，然后它的 zindex 将设置为 1*5 = 5 现在当说第 20 个标记被删除时，假设它是 并且它在相同/重叠的位置，它的 zindex 将是 20*2 = 40，这显然大于 5，所以 将落后于 。

我可能会尝试的另一件事是将素数分配为优先级，然后执行 Priority^(index++) 但我认为这不会总是有效。

我在想，如果我可以使用 x 和 y 将它们映射到如下所示的二维中，那么我可能会得到一个唯一的数字，即为 生成的任何数字都不会大于任何数字为生成的号码

但我不确定如何做到这一点。因此，如果您有任何想法，请告诉我。

Answer 1

我做出此回应的前提是您已经为多维 events [] 数组提供了优先级和时间戳，您可以在其中实现 sort()array() 对象的 /strong> 方法。

以下代码块基于此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]
];

现在您将调用 sort() 方法的函数表达式到优先级列（索引 1），然后调用时间戳列（索引 4）。为了更好地理解结构，我同时包含了代码的迂回和配对版本。有时，与作者相比，三元运算符可能会让读者有点困惑：

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-index。

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

以下代码 sn-p 显示了一个工作示例。我还包括一个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>