mvc5で角度googleマップを使用してポリゴンを描画する方法

Question

初めて角度付きGoogleマップで作業する。多角形を描き、その地域のすべての郵便番号を取得する方法が混乱しています。私はこれをどうやって行うのか分かりません。私のコード私のscript.jsで

<div ng-app="myapp" ng-controller="mapsController"> 
    <!--It displays the markers links--> 
    <div class="locations"> 
     <ul> 
      <li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li> 
     </ul> 
    </div> 
    <div class="maps"> 
     <!-- Add directive code (gmap directive) for show map and markers--> 
     <ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom"> 
      <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"> 
       <ui-gmap-window options="windowOptions" show="windowOptions.show"> 
        <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"></ui-gmap-drawing-manager> 
       </ui-gmap-window> 
      </ui-gmap-marker> 
     </ui-gmap-google-map> 
    </div> 
</div> 

で、次の私は、これが唯一のズームアップしても、何も描かれていないされているGoogleのマップを示し、次のコード

var app = angular.module('myapp', ['uiGmapgoogle-maps']); //dependency we should add to angular application 
app.controller('mapsController', function ($scope, uiGmapGoogleMapApi) { 
    //this is default coordinates for the map when it loads for first time 
    $scope.map = { 
     center: { 
      latitude: 41.850033, 
      longitude: -87.6500523 
     }, 
     zoom: 4, 
     polygons: [], 
     isDrawingModeEnabled: true, 
     bounds: {} 
    }; 
    $scope.markers = []; 
    $scope.locations = []; 

    $scope.windowOptions = { 
     show: true 
    }; 
    $scope.options = { 
     scrollwheel: false 
    }; 


    uiGmapGoogleMapApi.then(function (maps) { 
     $scope.drawingManagerOptions = { 
      drawingMode: google.maps.drawing.OverlayType.MARKER, 
      drawingControl: true, 
      drawingControlOptions: { 
       position: google.maps.ControlPosition.TOP_CENTER, 
       drawingModes: [ 
        google.maps.drawing.OverlayType.MARKER, 
        google.maps.drawing.OverlayType.CIRCLE, 
        google.maps.drawing.OverlayType.POLYGON, 
        google.maps.drawing.OverlayType.POLYLINE, 
        google.maps.drawing.OverlayType.RECTANGLE 
       ] 
      }, 
      circleOptions: { 
       fillColor: '#ffff00', 
       fillOpacity: 1, 
       strokeWeight: 5, 
       clickable: false, 
       editable: true, 
       zIndex: 1 
      } 
     }; 
     $scope.markersAndCircleFlag = true; 
     $scope.drawingManagerControl = {}; 
     $scope.$watch('markersAndCircleFlag', function() { 
      if (!$scope.drawingManagerControl.getDrawingManager) { 
       return; 
      } 
      var controlOptions = angular.copy($scope.drawingManagerOptions); 
      if (!$scope.markersAndCircleFlag) { 
       controlOptions.drawingControlOptions.drawingModes.shift(); 
       controlOptions.drawingControlOptions.drawingModes.shift(); 
      } 
      $scope.drawingManagerControl.getDrawingManager().setOptions(controlOptions); 
     }); 
    }) 

}).config(function (uiGmapGoogleMapApiProvider) { 
     uiGmapGoogleMapApiProvider.configure({ 
      libraries: 'drawing,geometry,visualization' 
     }); 
    }); 


//var latlng = new google.maps.LatLng(37.09024, -95.712891); 
//latitude: 41.850033, longitude: -87.6500523 

を書かれています。助けてください。私が指摘したことの1つは$ scope.drawingManagerControl.getDrawingManagerは条件でtrueになり、戻ってきます。

Answer 1

私はあなたが元に戻って、あなたが本当に達成したいものを探していると思います。 角度、グーグルマップ、またはその両方を学びたい場合は、正しい道にはないと思います。 まず、使用しているライブラリは、クリエイターによって管理されなくなりました。でも、彼らは可能な代替オプションを使用することをお勧めします。彼らは、私は2番目の1をお勧めします示して二つのオプションについては

Project not longer maintained

：angular-google-maps

このライブラリはAngular2で使用されるべきです。あなたが新しい技術を学ぶことを望んでいるなら、あなたはその募集について技術を目指すべきです。 Angularjsは、広く使われている本当に良いライブラリですが、Angular2の前身であり、時間が経つにつれて人気が低くなります。

と言われています。私はあなたがあなたのマップにマーカーや場所を宣言していないことに気付きました。したがって、地図に表示するデータは設定されていません。だからあなたは空の地図しか見ることができません。

$scope.markers = []; 
$scope.locations = []; 

私が試してみる前に実装しようとしているコードのロジックを理解して、空からうまく動作させることをお勧めします。