Question

我想在使用路线时将图标文字A，B，C ......（http://i.imgur.com/C6WXyVz.png）更改为其他内容。

以下是代码的一部分，

<directions 
  polyline-options='{strokeColor: "green"}'
  draggable="true"
  waypoints="{{wayPoints}}"
  suppress-markers="false"
  origin="51.546550, 0.026345"
  destination="51.5493953, 0.0412878">
</directions>

您的帮助将不胜感激！

Answer 1

angularjs-google-maps library的

directions指令不支持此类自定义，您可以考虑以下解决方案：

利用，例如MarkerWithLabel library来定义具有关联标签的标记
将suppressMarkers属性设置为true DirectionsRendererOptions object显示自定义标记而非默认标记

实施例

angular.module('mapApp', ['ngMap'])
    .controller("mapCtrl", function ($scope, NgMap, $timeout) {

        $scope.options = {
            "destination": "New York",
            "origin": "Chicago",
            "travelMode": "DRIVING"
        };

        NgMap.getMap().then(function (mapInstance) {
            $scope.map = mapInstance;
            updateRoute($scope.map, $scope.options);
        });


        var setMarker = function (map, pos, label) {
            var marker = new MarkerWithLabel({
                position: pos,
                map: map,
                labelContent: label,
                labelAnchor: new google.maps.Point(15, 65),
                labelClass: "labels", // the CSS class for the label
            });
        };



        var updateRoute = function (map, options) {
            var renderer = new google.maps.DirectionsRenderer(options);
            renderer.setMap(map);
            renderer.setOptions( { suppressMarkers: true } );
            var directionsService = new google.maps.DirectionsService();
            directionsService.route(options, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    $timeout(function () {
                        renderer.setDirections(response); 
                        var leg = response.routes[0].legs[0];
                        setMarker($scope.map, leg.start_location, leg.start_address);
                        setMarker($scope.map, leg.end_location, leg.end_address);
                    });
                }
            });
        };



    });

 .labels {
     color: green;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     white-space: nowrap;
   }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>






<div ng-app="mapApp" ng-controller="mapCtrl">
    <ng-map zoom="14" center="37.7699298, -122.4469157" style="height:90%">
        <!--directions  draggable="true" panel="directions-panel" suppress-markers="true" origin="{{origin}}" destination="{{destination}}">
        </directions-->
    </ng-map>
</div>

如何在使用路线（Angular）时更改Google地图上的图钉文字？

1 个答案: