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指令设置标记图标：

＆＃13;

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));
    }
  
 
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

要在Google地图上为标记设置各种自定义图标，您需要在$scope属性中添加图标对象。

$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'
    }
];

在marker指令中添加此信息将完成剩下的工作。

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

希望有助于!!

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

2 个答案: