javascript - AngularJS 中 Google map 的方向标记

Question

我一直在互联网上寻找解决方案 - 但没有运气。 我正在 Umbraco (AngularJS) 中建立一个网站 - 我使用 UI-Google-Map 插件 - 它效果很好!

我已经实现了路线指示，它就像一个魅力 - 我唯一的问题是，当路线显示在 map 上时，我无法更改“A”和“B”图标。

这就是我的范围:

$scope.map = {
            center: {
                latitude: 55.711898,
                longitude: 9.5387363
            },
            zoom: 12,
            events: {
                'tilesloaded': function (map) {
                    if (load) {
                        $timeout(function () {
                            maps.event.trigger(map, "resize");
                            var marker = new maps.Marker({
                                position: center,
                                map: map,
                                icon: biscuitIcon
                            });
                            marker.setMap(map);
                            map.setCenter(marker.getPosition());
                            directionsDisplay.setMap(map);
                        }, 500);
                        load = false;
                    } else {
                        maps.event.trigger(map, "resize");
                    }
                }
            },
            options: {
                disableDefaultUI: true,
                zoomControl: false,
                styles: [{'featureType':'water','elementType':'all','stylers':[{'color':'#f0f0f0'}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#000000'}]},{'featureType':'road.arterial','elementType':'geometry.fill','stylers':[{'color':'#363636'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'poi.attraction','elementType':'geometry.fill','stylers':[{'color':'#cccccc'}]}]
            },
            control: {}
        };

当您填写“发件人”-“收件人”表单时，会发生以下情况:

$scope.getDirections = function(){
            directionsService.route({
                origin: $scope.startlocation,
                destination: $scope.endlocation,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            }, function(response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0].legs[0];
                  directionsDisplay.setPanel(document.getElementById('directions-panel'));
                } else {
                    if(status === 'NOT_FOUND') {
                        window.alert('No results - Please try again');
                    }
                }
            });
        }

我尝试过“makeMarker”方法(http://jsfiddle.net/6LwgQ/1/)但没有运气。你们谁能指出我在哪里用头撞墙吗？

哦，顺便说一句。我尝试在使用“makeMarker”时“console.log”信息 - 所有信息都显示在我的控制台中，但它没有出现在我的 map 上:(我现在非常绝望......

提前致谢! /库克

Answer 1

要放置标记，您可以使用 ui-gmap-markers 指令。以下示例显示如何打印路线并设置结束/开始样式标记:

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function ($scope, uiGmapIsReady, $log) {

    $scope.startlocation = 'New York, NY';
    $scope.endlocation = 'San Diego, California';
    $scope.markers = [];
    $scope.icons = {
        start: {
            url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
            size: { width: 44, height: 32 },
            origin: { x: 0, y: 0 },
            anchor: { x: 22, y: 32 }
        },
        end: {
            url: 'http://maps.google.com/mapfiles/ms/micons/green.png',
            size: { width: 44, height: 32 },
            origin: { x: 0, y: 0 },
            anchor: { x: 22, y: 32 }
        }
    };
    $scope.map = {
        center: {
            latitude: 55.711898,
            longitude: 9.5387363
        },
        zoom: 12,
        options: {
            disableDefaultUI: true,
            zoomControl: false,
            styles: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': [{ 'color': '#f0f0f0' }] }, { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#000000' }] }, { 'featureType': 'road.arterial', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#363636' }] }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'poi.attraction', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#cccccc' }] }]
        },
        control: {}
    };

    


    uiGmapIsReady.promise()
    .then(function (instances) {
        printRoute();
    });



    var printRoute = function () {

        var directionsService = new google.maps.DirectionsService();
        var directionsRequest = {
            origin: $scope.startlocation,
            destination: $scope.endlocation,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.DRIVING
        };

        directionsService.route(directionsRequest, function (response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                var map = $scope.map.control.getGMap();
                var directionsDisplay = new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    suppressMarkers: true
                });

                var leg = response.routes[0].legs[0];
                setMarker(0,leg.start_location, $scope.icons.start, 'title');
                setMarker(1,leg.end_location, $scope.icons.end, 'title');

            } else {
                $log.error('Request failed: ' + status);
            }
        });
    }


    var setMarker = function (id,latLng, icon, title) {
        var markerInfo = {
            id: id,
            latitude: latLng.lat(),
            longitude: latLng.lng(),
            title: title,
            icon: icon
        };
        $scope.markers.push(markerInfo);
    };


});

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control" options="map.options" events="map.events">
            <ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

Plunker