2015-06-25 36 views
1

我在視圖中有一個Google Map,並且正在向其中添加大量的多邊形。問題是我有不同大小的多邊形,重疊。我需要爲每個多邊形設置z-index,以便我可以正確使用點擊偵聽器。未定義的函數在爲Google Maps多邊形調用getZIndez()時不是函數

這個過程應該是直截了當的,但正如我注意到的,事實並非如此。 當我嘗試調用getZIndex()方法或setZindex()時,我遇到了這個錯誤。

Undefined is not a function (evaluating 'shape.setZIndex()') 

這是我的代碼:

function attachMap(params){ 
    removeMap(); 
    var options = $.extend(true, { 
     shapesData: [], 
     shapeClick: function(event){} 
    },params); 

    var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    // Create the Google Maps shapes and append them to the map 
    shapes = []; 
    map = new google.maps.Map(document.getElementById('dxf-shapes'), mapOptions); 
    if(typeof options.shapesData != "undefined") { 
     $.each(options.shapesData, function (shapeIndex, shapeData) { 
      var paths = []; 
      // points of the shape 
      $.each(shapeData.points, function (pointIndex, pointData) { 
       var mapsPoint = new google.maps.LatLng(pointData.lat, pointData.lng); 
       paths.push(mapsPoint); 
      }); 

      // new shape from the points 
      var shape = new google.maps.Polygon({ 
       paths: paths, 
       strokeColor: 'rgb(' + shapeData.color + ')', 
       strokeOpacity: 1, 
       strokeWeight: 1.5, 
       fillColor: 'rgb(' + shapeData.color + ')', 
       fillOpacity: 0, 
       geodesic: true, 
       zIndex: 1 
      }); 

      shapes.push(shape); 
     }); 

     shapes.sort(function(a, b){ 
      var aArea = google.maps.geometry.spherical.computeArea(a.getPath()); 
      var bArea = google.maps.geometry.spherical.computeArea(b.getPath()); 

      if(aArea < bArea){ 
       return -1; 
      } 
      if(aArea > bArea){ 
       return 1; 
      } 

      return 0; 
     }); 

     var zIndex = 0; 
     $.each(shapes, function(index, shape){ 
      zIndex++; 
      //append the shape to the map 
      shape.setMap(map); 
      shape.setZIndex(zIndex); 

      google.maps.event.addListener(shape, 'click', options.shapeClick); 
     }); 
    } 
} 

回答

2

我不建議擴展Maps API對象原型並依賴無證行爲(getsetzIndex),如答案中所示。

如果您只能使用記錄的API,則會更好。在你的代碼中,你根本不使用getZIndex,所以擺脫它。你在哪裏打電話shape.setZIndex(zIndex);,只需將其更改爲:

shape.setOptions({ zIndex: zIndex }); 

現在您只使用記錄的地圖API的屬性和方法。這使您的代碼更具前瞻性。

+0

非常感謝你;已經修好了。我真的試圖避免這種黑客,但我無法通過它。你提出的解決方案,甚至沒有通過我的頭。有用。 –

0

的問題已通過添加方法setZIndex()和getZIndex()到多邊形類型fized。

google.maps.Polygon.prototype.getZIndex=function(){return (this.get('zIndex')||0);}; 
google.maps.Polygon.prototype.setZIndex=function(v){this.set('zIndex',v);}; 

希望這將有助於未來的人。

相關問題