如何控制标记在谷歌地图 Javascript 上的图层？答案

【问题标题】：How do I control what layer a marker is on google maps Javascript?如何控制标记在谷歌地图 Javascript 上的图层？
【发布时间】：2016-03-03 19:09:05
【问题描述】：

我确定这个问题已经得到解答，但我找不到。如何在谷歌地图 v3 Javascript api 上更改标记的标记层？

例如，在下图中，我希望公共汽车图标出现在所有T 图标之上。

我的巴士图标是这样制作的：

  var image = {
    url: getIconUrl(bus.num),
    anchor: new google.maps.Point(30,30)
  };
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
    map: $scope.map, 
    animation: google.maps.Animation.DROP,
    icon: image
  });

我的T 图标是这样制作的：

  var image = {
    url: stopIcon
  };
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
    map: $scope.map,
    icon: image
  });

总线总是在T 之后生成，因为T 存储在本地，总线是实时数据并按需提供服务。

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

您可以根据自己的标记设置zIndex

喜欢：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
    map: $scope.map,
    icon: image,
    zIndex: 1// as needed
  });

或者您可以使用setZIndex() 方法更改它：

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
        map: $scope.map,
        icon: image
      });

marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

【讨论】：

【解决方案2】：

您可以使用 z-index 选项进行控制。

  var image = {
    url: getIconUrl(bus.num),
    anchor: new google.maps.Point(30,30)
  };
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
    map: $scope.map, 
    animation: google.maps.Animation.DROP,
    icon: image,
    zIndex: google.maps.Marker.MAX_ZINDEX // <--
  });

【讨论】：