1. 首頁
  2. 問答
  3. 改變z的懸停標記索引，使其可見

改變z的懸停標記索引，使其可見

2012-02-18 60 views
5

我試圖讓我當前徘徊的標記有比其他更大的z索引，以便即使它被其他標記隱藏它也會當我懸停在它上面時獲得完全可見性。改變z的懸停標記索引，使其可見

點擊任何標記我想要做同樣的事情。

google.maps.event.addListener(this.marker, 'mouseover', function() { 
      this.old_ZIndex = this.getZIndex(); //trying to get the current z- index 
      console.log(this.old_ZIndex); //this is undefined: why? 
      this.setZIndex(this.old_ZIndex + 100); //setting a higher z-index than all other markers 
      console.log("the old z index is ",this.old_ZIndex); 
     });

但是有了這個，我會無限增加Z指數..有我在其中能有恢復回來時，我將鼠標懸停或點擊任何其他標記一些其他的方式。 。

或者有沒有更好的方法來實現它？

來源

2012-02-18 maniac_user

回答

8

如果您之前沒有在標記上設置zIndex，或者首先初始化它或使用setOption（）函數，那麼'this.getZIndex（）'將始終返回'undefined'。

如果有超過100個標記，您的腳本也可能無法正常工作。

我已經放在一個非常簡單的地圖下面，包含2個標記，略有重疊。它會在zIndex的設置將其帶到頂端需要最高級別的標誌物之一的懸停，然後返回它回到它以前鼠標移開時：

var map; 
    var markers = new Array(); 
    var highestZIndex = 0; 

    function initialize() { 

     /* SETUP MAP */ 
     var myLatlng = new google.maps.LatLng(52.06768, -1.33758); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     /* ADD 1st MARKER */ 
     var markerOptions = { 
      position: new google.maps.LatLng(52.06768, -1.32058), 
      map: map, 
      zIndex:1 
     }; 
     marker = createMarker(markerOptions, false); 
     marker.set("myZIndex", marker.getZIndex()); 

     google.maps.event.addListener(marker, "mouseover", function() { 
      getHighestZIndex(); 
      this.setOptions({zIndex:highestZIndex+1}); 
     }); 
     google.maps.event.addListener(marker, "mouseout", function() { 
      this.setOptions({zIndex:this.get("myZIndex")}); 
     }); 

     /* ADD 2nd MARKER */ 
     var markerOptions = { 
      position: new google.maps.LatLng(52.06768, -1.33758), 
      map: map, 
      zIndex:2  
     }; 
     marker = createMarker(markerOptions, false); 
     marker.set("myZIndex", marker.getZIndex()); 

     google.maps.event.addListener(marker, "mouseover", function() { 
      getHighestZIndex(); 
      this.setOptions({zIndex:highestZIndex+1}); 
     }); 
     google.maps.event.addListener(marker, "mouseout", function() { 
      this.setOptions({zIndex:this.get("myZIndex")}); 
     }); 

    } 

    function createMarker(markerOptions) { 
     var marker = new google.maps.Marker(markerOptions); 
     markers.push(marker); 
     return marker; 
    } 

    function getHighestZIndex() { 

     // if we haven't previously got the highest zIndex 
     // save it as no need to do it multiple times 
     if (highestZIndex==0) { 
      if (markers.length>0) { 
       for (var i=0; i<markers.length; i++) { 
        tempZIndex = markers[i].getZIndex(); 
        if (tempZIndex>highestZIndex) { 
         highestZIndex = tempZIndex; 
        } 
       } 
      } 
     } 
     return highestZIndex; 

    }

來源

2012-02-18 11:14:50 BIOSTALL

1 
var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       zIndex: 1 
      });  

      google.maps.event.addListener(marker, 'mouseover', function() { 
       this.setOptions({zIndex:10}); 
      }); 
      google.maps.event.addListener(marker, 'mouseout', function() { 
       this.setOptions({zIndex:1}); 
      });

來源

2013-01-11 23:54:02 jimmy

0

所以這個問題是一個一年前，但我想出了一些東西，並認爲別人可能會讚賞它。甚至有圖標翻轉作爲獎金。我正在處理數以千計的公交車和火車站，因此這對我來說非常有效。

google.maps.event.addListener(marker, 'mouseover', function() { 
    if (this.getIcon() === busnot) { this.setIcon(busovr); } 
    if (this.getIcon() === lrtnot) { this.setIcon(lrtovr); } 
    $.each($.grep(markers, function (item) { return item.getZIndex() == 10 }), function (i, e) { e.setOptions({ zIndex: 1 }); }); 
    this.setOptions({zIndex:10}); 
}); 
google.maps.event.addListener(marker, 'mousemove', function() { 
    if (this.getIcon() === busnot) { this.setIcon(busovr); } 
    if (this.getIcon() === lrtnot) { this.setIcon(lrtovr); } 
    $.each($.grep(markers, function (item) { return item.getZIndex() == 10 }), function (i, e) { e.setOptions({ zIndex: 1 }); }); 
    this.setOptions({ zIndex: 10 }); 
}); 
google.maps.event.addListener(marker, 'mouseout', function() { 
    if (this.getIcon() === busovr) { this.setIcon(busnot); } 
    if (this.getIcon() === lrtovr) { this.setIcon(lrtnot); } 
    $.each($.grep(markers, function (item) { return item.getZIndex() == 10 }), function (i, e) { e.setOptions({ zIndex: 1 }); }); 
});

來源

2013-06-24 19:02:55

0

我做的是有一個變量（highestZ）設置zIndex的爲我所有的標誌（在我的情況下，我用折線做到了）和增量的方式，和一個變量來臨時保存的z-index我「鼠標懸停」在任何一個標記：

設置變量爲全局：

var highestZ = 1; //set 1 for the first z-index 
var tmpZIndex = 0;

然後建立的時候/你的初始化標記選項只需添加這

zIndex : highestZ++ //this sets the z-index for the marker and increments it for the next one

樣品（我沒有地雷在一個循環中）：

var routePath = new google.maps.Polyline({ 
      strokeWeight: 5, 
      zIndex : highestZ++ //set zIndex and increment it 
     });

最後只是做鼠標懸停和mouseout事件處理程序是這樣的：

 google.maps.event.addListener(routePath, "mouseover", function() { 
      tempZIndex = routePath.zIndex; //set "this" z-index value to tempZIndex for mouseout 
      routePath.setOptions({ 
       zIndex: highestZ + 1 //set the z-index to the highest z-index available plus 1 for it to be the topmost marker on mouseover 
      }); 
     }); 
     google.maps.event.addListener(routePath, "mouseout", function() { 
      routePath.setOptions({ 
       zIndex: tempZIndex //set the z-index back to it's original set upon mouseover earlier 
      });

我的答案可能是簡單的，和一般的，當然不完整，只專注於問題，希望你可以進一步工作，以適應你的項目。

來源

2014-01-15 15:09:11

相關問題

 相關問題