Angularjs Google Maps verbinden mehrere Marker

Question

Ich baue eine Ionic App und darin habe ich die folgende Anforderung: Ich möchte Google Maps verwenden und ich möchte in der Lage sein, drei Markierungen auf der Karte zu markieren -> verbinden diese drei Marker automatisch -> und berechnen Sie die Fläche, die es bedeckt.

Ich habe folgende (Karte auf dem Bildschirm angezeigt, kann ich mehrere Markierungen hinzugefügt werden):

Controller:

angular.extend($scope, { 
    map: { 
     center: { 
      latitude: 51.718921, 
      longitude: 8.757509 
     }, 
     zoom: 11, 
     markers: [], 
     events: { 
     click: function (map, eventName, originalEventArgs) { 
      var e = originalEventArgs[0]; 
      var lat = e.latLng.lat(),lon = e.latLng.lng(); 
      var marker = { 
       id: Date.now(), 
       icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', 
       coords: { 
        latitude: lat, 
        longitude: lon 
       }, 
      }; 
      $scope.map.markers.push(marker); 
      console.log($scope.map.markers); 
      $scope.$apply(); 
     } 
    } 
    } 
}); 

HTML:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events"> 
    <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker> 
    </ui-gmap-google-map> 

Wie kann Ich gehe weiter? Code Ausschnitte?

Answer 1

Zum Verbinden von Markern können Sie google.maps.Polyline Objekt verwenden, in Angular Google Maps Bibliothek gibt es eine ui-gmap-polyline Direktive für diesen Zweck.

Beispiel

angular.module('map-example', ['uiGmapgoogle-maps']) 
 
    .controller('MapController', function ($scope, $http, uiGmapGoogleMapApi, uiGmapIsReady) { 
 

 

 
     $scope.map = { 
 
      zoom: 2, 
 
      bounds: {}, 
 
      center: { latitude: 0.0, longitude: 180.0 }, 
 
      markers: [ 
 
       { "id": 1, "coords": { "latitude": 37.772323, "longitude": -122.214897 } }, 
 
       { "id": 2, "coords": { "latitude": 21.291982, "longitude": -157.821856 } }, 
 
       { "id": 3, "coords": { "latitude": -18.142599, "longitude": 178.431 } }, 
 
       { "id": 4, "coords": { "latitude": -27.46758, "longitude": 153.027892 } } 
 
      ] 
 
     }; 
 

 

 

 
     $scope.map.polyline = 
 
      { 
 
       "path": $scope.map.markers.map(function (m) { 
 
        return { 
 
         "latitude": m.coords.latitude, 
 
         "longitude": m.coords.longitude 
 
        }; 
 
       }), 
 
       "stroke": { 
 
        "color": '#6060FB', 
 
        "weight": 3 
 
       }, 
 
       "geodesic": true, 
 
       "visible": true 
 
      }; 
 

 
    });

.angular-google-map-container { 
 
    height: 450px; 
 
    width: auto; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script> 
 
<script src="https://cdn.rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> 
 

 

 

 
<div ng-app="map-example" ng-controller="MapController"> 
 
    
 

 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events"> 
 
     <ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker> 
 
     <ui-gmap-polyline path="map.polyline.path" stroke="map.polyline.stroke" visible='map.polyline.visible' geodesic='map.polyline.geodesic' fit="false"></ui-gmap-polyline> 
 
    </ui-gmap-google-map> 
 

 
</div>