Как изменить стиль фигуры в области видимости?

Я использую пользовательскую версию 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