angularjs – 如何使用mvc5中的angular-google-maps绘制多边形

前端之家收集整理的这篇文章主要介绍了angularjs – 如何使用mvc5中的angular-google-maps绘制多边形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
第一次使用angular-google-maps.我很困惑如何绘制多边形并抓取该区域中的所有邮政编码.我不知道该怎么做.以下是我的代码
  1. <div ng-app="myapp" ng-controller="mapsController">
  2. <!--It displays the markers links-->
  3. <div class="locations">
  4. <ul>
  5. <li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li>
  6. </ul>
  7. </div>
  8. <div class="maps">
  9. <!-- Add directive code (gmap directive) for show map and markers-->
  10. <ui-gmap-google-map style="Box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom">
  11. <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
  12. <ui-gmap-window options="windowOptions" show="windowOptions.show">
  13. <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl"></ui-gmap-drawing-manager>
  14. </ui-gmap-window>
  15. </ui-gmap-marker>
  16. </ui-gmap-google-map>
  17. </div>
  18. </div>

在我的script.js中,我编写了以下代码

  1. var app = angular.module('myapp',['uiGmapgoogle-maps']); //dependency we should add to angular application
  2. app.controller('mapsController',function ($scope,uiGmapGoogleMapApi) {
  3. //this is default coordinates for the map when it loads for first time
  4. $scope.map = {
  5. center: {
  6. latitude: 41.850033,longitude: -87.6500523
  7. },zoom: 4,polygons: [],isDrawingModeEnabled: true,bounds: {}
  8. };
  9. $scope.markers = [];
  10. $scope.locations = [];
  11.  
  12. $scope.windowOptions = {
  13. show: true
  14. };
  15. $scope.options = {
  16. scrollwheel: false
  17. };
  18.  
  19.  
  20. uiGmapGoogleMapApi.then(function (maps) {
  21. $scope.drawingManagerOptions = {
  22. drawingMode: google.maps.drawing.OverlayType.MARKER,drawingControl: true,drawingControlOptions: {
  23. position: google.maps.ControlPosition.TOP_CENTER,drawingModes: [
  24. 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
  25. ]
  26. },circleOptions: {
  27. fillColor: '#ffff00',fillOpacity: 1,strokeWeight: 5,clickable: false,editable: true,zIndex: 1
  28. }
  29. };
  30. $scope.markersAndCircleFlag = true;
  31. $scope.drawingManagerControl = {};
  32. $scope.$watch('markersAndCircleFlag',function () {
  33. if (!$scope.drawingManagerControl.getDrawingManager) {
  34. return;
  35. }
  36. var controlOptions = angular.copy($scope.drawingManagerOptions);
  37. if (!$scope.markersAndCircleFlag) {
  38. controlOptions.drawingControlOptions.drawingModes.shift();
  39. controlOptions.drawingControlOptions.drawingModes.shift();
  40. }
  41. $scope.drawingManagerControl.getDrawingManager().setOptions(controlOptions);
  42. });
  43. })
  44.  
  45. }).config(function (uiGmapGoogleMapApiProvider) {
  46. uiGmapGoogleMapApiProvider.configure({
  47. libraries: 'drawing,geometry,visualization'
  48. });
  49. });
  50.  
  51.  
  52. //var latlng = new google.maps.LatLng(37.09024,-95.712891);
  53. //latitude: 41.850033,longitude: -87.6500523

这只显示了一个缩放的谷歌地图,甚至没有绘制任何内容.请帮忙.我注意到的一件事是!$scope.drawingManagerControl.getDrawingManager在if条件中变为true并返回.

我认为你应该退后一步,寻找你真正想要实现的目标.
如果你想学习角度,谷歌地图,或两者兼而有之,我认为你不是在正确的道路上.
首先,您使用的库不再由其创建者维护.即使他们建议使用备用选项:

Project not longer maintained

对于他们展示的两个选项,我将推荐第二个:angular-google-maps

该库将与Angular2一起使用.如果您正在寻求学习新技术,您应该致力于技术提升. Angularjs虽然是一个非常好用的库,但它是Angular2的前身,随着时间的推移,它将不那么受欢迎.

话说回来;我注意到你没有在地图中声明任何标记或位置.因此,没有数据设置在地图中显示.这就是为什么你只看到一张空地图.

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

我建议您在尝试之前尝试理解您尝试实现的代码的逻辑,并使其在天空中工作.

猜你在找的Angularjs相关文章