thay đổi chỉ mục z của điểm đánh dấu trên di chuột để hiển thị chỉ số

Question

Tôi đang cố gắng tạo điểm đánh dấu hiện tại đang có chỉ số z lớn hơn các điểm đánh dấu khác, vì vậy ngay cả khi nó được ẩn bởi các điểm đánh dấu khác đạt được khả năng hiển thị đầy đủ khi tôi di chuột lên đó.

Khi nhấp vào bất kỳ điểm đánh dấu nào tôi muốn thực hiện tương tự.

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); 
     }); 

Nhưng với điều này tôi sẽ tăng vô hạn chỉ mục z .. có cách nào khác để tôi có thể hoàn nguyên khi tôi di chuột hoặc nhấp vào bất kỳ điểm đánh dấu nào khác. .

Hoặc có cách nào tốt hơn để triển khai không ??

Answer 1

'this.getZIndex()' luôn trả về 'không xác định' nếu trước đó bạn chưa đặt zIndex trên điểm đánh dấu, khi khởi tạo nó ở vị trí đầu tiên hoặc bằng cách sử dụng hàm setOption().

Tập lệnh của bạn cũng có thể không hoạt động 100% nếu có hơn 100 điểm đánh dấu.

Tôi đã đặt cùng một bản đồ rất đơn giản bên dưới chứa 2 điểm đánh dấu, hơi trùng lặp. Trên di chuột của một trong những dấu hiệu nó sẽ thiết lập các ZIndex lên mức cao nhất cần thiết để đưa nó vào phía trên, sau đó quay trở lại với những gì nó đã trước khi di chuột ra:

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; 

    } 

Answer 2

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}); 
      }); 

Answer 3

Vì vậy, câu hỏi này là một năm trước nhưng tôi đã tìm ra điều gì đó và nghĩ rằng những người khác có thể đánh giá cao nó. Thậm chí có cả rollover biểu tượng tham gia như một phần thưởng. Tôi đang đối phó với hàng ngàn điểm dừng xe buýt và xe lửa đang được hiển thị để điều này hóa ra khá hiệu quả đối với tôi.

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 }); }); 
}); 

Answer 4

Con đường tôi đã làm điều đó là để có một biến (highestZ) thiết lập các ZIndex cho tất cả các dấu hiệu của tôi (trong trường hợp của tôi, tôi đã làm nó với polylines) và gia tăng, và một biến tạm giữ z-index của bất cứ dấu hiệu i "mouseover" trên:

Đặt các biến như toàn cầu:

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

Sau đó, khi xây dựng/khởi tạo tùy chọn đánh dấu của bạn chỉ cần thêm này

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

mẫu (tôi đã làm tôi trong một vòng lặp):

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

Và cuối cùng chỉ làm mouseover và sự kiện mouseout xử lý như thế này:

 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 
      }); 

câu trả lời của tôi có lẽ là đơn giản, và nói chung và tất nhiên không đầy đủ để tập trung vào vấn đề chỉ, hy vọng bạn có thể làm việc nó hơn nữa để phù hợp với dự án của bạn.

Answer 5

Tôi nghĩ rằng cách dễ nhất là sử dụng CSS thay vì javascript:

.your-custom-marker-class { 
    z-index: 100; 
} 
.your-custom-marker-class:hover { 
    z-index: 101; 
} 

này có nghĩa là bạn phải sử dụng CustomOverlays (https://developers.google.com/maps/documentation/javascript/customoverlays#introduction) thay vì đánh dấu mặc định, nhưng có một số lợi thế khác nữa, nếu bạn muốn tùy chỉnh bố cục, v.v.