如何通過範圍更改形狀的樣式？

我使用的是自定義的GoogleMap AngularJS Directive，這是GitHub較少受歡迎的版本。我正在使用它，因爲我不滿意other人處理事件的方式。如何通過範圍更改形狀的樣式？

我有一個充滿地圖的形狀的GeoJSON文件。我會讓它互動，以便您可以選擇每個區域。所以我設法讓初始區域選擇和區域取消選擇工作，但如果您選擇一個區域，然後選擇一個區域，它應該改變舊選定區域的樣式並更新新區域。

我遍歷GeoJSON文件並構建範圍。

$scope.shapes = []; 
$http.get('/static/json/areas.json').then(function(res){ 
    for (var x = res.data.features.length -1; x >= 0; x--) { 
     paths = []; 
     for (var y = res.data.features[x].geometry.coordinates[0].length - 1; y >= 0; y--) { 
      paths.push([ res.data.features[x].geometry.coordinates[0][y][3], res.data.features[x].geometry.coordinates[0][y][0]]); 
     }; 
     $scope.shapes.push({ 
      areaName: res.data.features[x].properties.name, 
      path: paths, 
      fillColor: '#4F639E', 
      fillOpacity: 0.4, 
      strokeColor: '#4F639E', 
      strokeOpacity: 1, 
      strokeWeight:1 
     }); 
    }; 
});

然後使用和ng-repeat將它們添加到地圖。

<map 
    zoom="13" 
    center="[-33.955, 18.42]" 
    disable-default-u-i="true" 
    disable-double-click-zoom="true" 
    draggable="true" 
    keyboard-shortcuts="false" 
    map-type-id="SATELLITE"> 
    <shape ng-repeat="shape in shapes track by $index" 
     on-mouseover="areaOver()" 
     on-mouseout="areaOut()" 
     on-click="areaClick()" 
     id="{{$index+1}}" 
     name="polygon" 
     stroke-color="{{shape.strokeColor}}" 
     stroke-opacity="{{shape.strokeOpacity}}" 
     stroke-weight="{{shape.strokeWeight}}" 
     fill-color="{{shape.fillColor}}" 
     fill-opacity="{{shape.fillOpacity}}" 
     paths="{{shape.path}}"> 
    </shape> 
</map>

然後我添加事件偵聽器。這兩個用於懸停效果。

// Highlight area on hover 
$scope.areaOver = function() { 
    if ($scope.select != this.id) { 
     this.setOptions({ 
      fillOpacity: 1 
     }); 
    }; 
} 

// Return area on mouse-out to previous style 
$scope.areaOut = function() { 
    if ($scope.select != this.id) { 
     this.setOptions({ 
      fillOpacity: 0.4 
     }); 
    }; 
}

這一個時的區域已被選擇

$scope.areaClick = function() { 
    var path = this.getPath(); 

    // The first time area selected 
    if ($scope.select == null) { 
     $scope.select = this.id; 
     $scope.map.fitBounds(get_bounds(path.j)) 

     this.setOptions({ 
      fillOpacity: 0, 
      strokeColor: '#FFFFFF', 
      strokeWeight: 2, 
      zIndex: +1 
     }); 
    } 

    // When the same area has been selected again - reset view. 
    else if ($scope.select == this.id) { 
     $scope.select = null; 
     this.setOptions({ 
      fillOpacity: 0.4, 
      strokeColor: '#4F639E', 
      strokeWeight: 1, 
      zIndex: -1 
     }); 

     $scope.map.setZoom(13); 
     $scope.map.setCenter({lat: -33.96, lng: 18.38}); 
    } 

    // When a different area has been selected - reset old style then update new style. 
    else { 
     // Reset old selected shape 
     $scope.map.data.revertStyle(); // Not working 
     $scope.apply; 

     for (var i = $scope.map.shapes.length - 1; i >= 0; i--) { 
      $scope.map.shapes[i].setOptions({ // Not working 
       fillOpacity: 0.4, 
       strokeColor: '#4F639E', 
       strokeWeight: 1, 
       zIndex: -1 
      }); 
     }; 
     $scope.apply; 

     // Move/Style newly selected shape 
     $scope.select = this.id; 
     $scope.map.fitBounds(get_bounds(path.j)) 

     this.setOptions({ 
      fillOpacity: 0, 
      strokeColor: '#FFFFFF', 
      strokeWeight: 2, 
      zIndex: +1 
     }); 
    }; 
}

另外自定義函數來計算出所選擇的區域的中心爲。

// Custom Function 
function get_bounds(path) { 
    var smallest_lat = 360; 
    var smallest_lng = 360; 
    var largest_lat = -360; 
    var largest_lng = -360; 

    for (var i = path.length - 1; i >= 0; i--) { 
     var lat = path[i].lat(); 
     var lng = path[i].lng(); 

     if (lat > largest_lat) {largest_lat = lat}; 
     if (lat < smallest_lat) {smallest_lat = lat}; 
     if (lng > largest_lng) {largest_lng = lng}; 
     if (lng < smallest_lng) {smallest_lng = lng}; 
    } 

    var northEast = new google.maps.LatLng(smallest_lat, smallest_lng); 
    var southWest = new google.maps.LatLng(largest_lat, largest_lng); 
    var bounds = new google.maps.LatLngBounds(northEast, southWest); 

    return bounds; 
}

如何從示波器更新形狀的樣式？ Plunker

來源

2014-09-29 Karl Stulik