Angularjs谷歌地图连接多个标记答案

【问题标题】：Angularjs Google maps connect multiple markersAngularjs谷歌地图连接多个标记
【发布时间】：2016-10-11 23:02:14
【问题描述】：

我正在构建一个 Ionic 应用程序，其中我有以下要求：我想使用谷歌地图，我希望能够在地图上标记三个标记 -> 自动连接这三个标记 -> 并计算它所覆盖的区域。

我有以下（地图显示在屏幕上，我可以添加多个标记）：

控制器：

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>

我该如何继续？编码sn-ps？

【问题讨论】：

标签： angularjs google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

要连接标记，您可以使用 google.maps.Polyline 对象，在 Angular Google Maps 库中有一个用于此目的的 ui-gmap-polyline 指令。

示例

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>

【讨论】：