使用自定义图标的角度谷歌地图

Question

I am trying to use a custom icon for my markers. When i use the ui-gmap-marker for a single marker, it works perfectly. But i couldn't make it work for multiple markers.

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

The following example shows how to set marker icon via ui-gmap-markers directive:

 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> 

For a complete list of google.maps.Icon properties, follow Icon object specification

Answer 2

For having various custom icons for the markers on the Google Maps you need to add the icon object in the $scope property.

$scope.markers = [
    {
        'title' : 'Location #1',
        'content' : 'This is marker 1',
        'location'  : [40.7112, -74.213],
        'icon' : 'yourIconUrl1.png'
    }, 
    {
        'title' : 'Location #2',
        'content' : 'This is marker 2',
        'location'  : [40.7243, -74.2014],
        'icon' : 'yourIconUrl2.png'
    }, 
    {
        'title' : 'Location #3',
        'content' : 'This is marker 3',
        'location'  : [40.7312, -74.1923],
        'icon' : 'yourIconUrl3.png'
    }
];

Adding this information in the marker directive will do the rest of the thing.

<marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
        position="{{marker.location}}" 
        on-click="showMarker(event, $index)"
        icon="{{marker.icon}}" >
</marker>

Hope that Helps!!