mvc5

Question

'da angular-google-map'leri kullanarak çokgen çizme İlk kez açısal-google-haritalar üzerinde çalışma. Bir poligonun nasıl çizileceği ve bu bölgedeki tüm posta kodlarının nasıl alınacağı konusunda kafam karıştı. Ve bunun nasıl yapılacağı hakkında hiçbir fikrim yok. Aşağıdaki kodum i aşağıdaki kodu

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 

Bu yalnızca yakınlaştırır ve hatta hiçbir şey çizilmiş olan bir google harita gösterir

yazdım benim script.js ise

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

olduğunu. Lütfen yardım et. Ben kaydettim bir şey var! $ Scope.drawingManagerControl.getDrawingManager koşulu doğru döner ve geri döner.

Answer 1

Geri adım atıp gerçekten neyi başarmak istediğinizi araştırmanız gerektiğini düşünüyorum. Köşeli, google haritalarını veya her ikisini de öğrenmek istiyorsanız, doğru yolda olmadığınızı düşünüyorum. Her şeyden önce, kullandığınız kitaplık artık içerik oluşturucuları tarafından korunmuyor. Hatta mevcut alternatif seçenekler kullanmak tavsiye: onlar 2 tek önerecektir göstermek iki seçenek için

Project not longer maintained

: angular-google-maps

Bu kütüphane Angular2 ile kullanılacak. Yeni teknolojiler öğrenmek istiyorsanız, yükseltmeyi teknoloji ile hedeflemelisiniz. Angularjs, yaygın olarak kullanılan gerçekten iyi bir kütüphanedir, Angular2'nin öncülüdür ve zaman geçtikçe daha az popüler olacaktır.

Bunu söyledikten; Haritanızda herhangi bir işaretçi veya konum bildirmediğinizi fark ettim. Dolayısıyla, haritanızda gösterilecek veri yok. Bu yüzden sadece boş bir harita görüyorsun.

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

Seni daha iyi bunu denemek ve gökyüzünden çalışması için önce uygulamaya çalışıyoruz kod mantığını anlamaya çalışma öneriyoruz.