如何在mvc5中使用角度谷歌地圖繪製多邊形

第一次使用角度谷歌地圖。我很困惑如何繪製一個多邊形並獲取該地區的所有郵政編碼。我不知道如何做到這一點。下面是我的代碼如何在mvc5中使用角度谷歌地圖繪製多邊形

<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>

在我的script.js我寫了下面的代碼

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

這隻能說明一個谷歌地圖是放大，甚至什麼都沒有繪製。請幫忙。我注意到的一件事是！$ scope.drawingManagerControl.getDrawingManager在if條件中變爲true並返回。

來源

2017-04-19 Sana

您是否找到解決方案？ –

不，還沒有找到任何東西 – Sana

你想讓用戶在地圖上繪製多邊形嗎？或者你有沒有座標，你想繪製基於它的polygone？ –

我認爲你應該退一步，尋找你真正想達到的目標。如果你想學習角度，谷歌地圖，或兩者，我認爲你不是在正確的道路。首先，你正在使用的圖書館不再由他們的創作者維護。他們甚至建議使用可用的備用選項：

Project not longer maintained

因爲他們讓我將推薦第二屆一個兩個選項：angular-google-maps

該庫與Angular2使用。如果你想學習新技術，你應該瞄準技術提高。 Angularjs雖然是一個非常好用的庫，但卻是Angular2的前身，隨着時代的推移，它不會流行起來。

說了這麼多;我注意到你沒有在你的地圖上標記任何標記或位置。因此，沒有數據設置爲顯示在您的地圖中。這就是爲什麼你只看到一個空的地圖。

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

我建議你最好試着理解你試圖實現的代碼的邏輯，然後再嘗試它，並讓它工作在天空之外。

來源

2017-05-01 15:12:11 Gi1ber7

我必須做到這一點與angularjs不angular2。而且，即使在聲明標記之後它也不起作用。 – Sana

您應該發佈完整的代碼，以便我們能夠更好地爲您提供幫助。 – Gi1ber7

這是完整的代碼。 – Sana

如何在mvc5中使用角度谷歌地圖繪製多邊形

回答

相關問題