javascript - 使用自定义图标的 Angular 谷歌地图

Question

我正在尝试为我的标记使用自定义图标。当我使用 ui-gmap-marker 作为单个标记时，它工作得很好。但我无法让它适用于多个标记。

createMarker: function(markerId, latitude, longitude, markerIcon, markerIconSize, zIndex) {

     markerIconSize = new google.maps.Size(markerIconSize[0], markerIconSize[1]);
     $scope.markerArray = [];
     $scope.markers = [];

     var newMarker = {
         id: markerId,
         latitude: latitude,
         longitude: longitude,
         icon: {
             url: markerIcon,
             scaledSize: markerIconSize
         },
         options: {
             zIndex: zIndex
         }
    };
    $scope.markers.push(newMarker);
    $scope.markerArray = $scope.markers;
}

<ui-gmap-google-map center="map.center"
            control="map.control"
            zoom="map.zoom"
            options="map.options"
            bounds="map.bounds"
            draggable="true">
        <ui-gmap-markers
            models="markerArray"
            coords="'self'"
            icon="'icon'">
        </ui-gmap-markers>
</ui-gmap-google-map>

Answer 1

以下示例展示了如何通过 ui-gmap-markers 指令设置标记图标:

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function($scope) {
    $scope.map = {
        center: { latitude: 40.1451, longitude: -99.6680 },
        zoom: 3,
        options: { scrollwheel: false }
    };


    var getRandomLat = function() {
        return Math.random() * (180.0) - 90.0;
    };
    var getRandomLng = function () {
        return Math.random() * (360.0) - 180.0;
    };  


    var createRandomMarker = function(i) {
        var item = {
            latitude: getRandomLat(),
            longitude: getRandomLng(),
            title: '#' + i,
            show: true,
            Uid: i,
            icon: {
                url: 'http://www.google.com/mapfiles/markerA.png',
                scaledSize: { width: 36, height: 48 }
            },
        };
        return item;
    };
   
    $scope.markers = [];
    for (var i = 0; i < 256; i++) {
        $scope.markers.push(createRandomMarker(i));
    }
  
 
});

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#map_canvas {
    position: relative;
}

.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="//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"  options="map.options" events="map.events">
            <ui-gmap-markers models="markers" idkey="'Uid'"
                             coords="'self'" icon="'icon'">
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>

有关 google.maps.Icon 属性的完整列表，请关注 Icon object specification