我正在尝试为我的标记使用自定义图标。当我使用 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>
最佳答案
以下示例展示了如何通过 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
关于javascript - 使用自定义图标的 Angular 谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30312552/