我正在做一个项目,我使用带有angularjs的ngmap 1.13.13在地图上显示了大量的船只。我想在我的地图上有自定义标记。但是我从来没有把它们放在我的地图上,或者如果它们没有缩放。我尝试了不同的方法,这里有两个:
<div ng-repeat="p in points">
<marker icon="http://www.cliparthut.com/clip-arts/823/arrowhead-clip-art-823528.png" icon.scale="0.1" position="{{p.latitude}}, {{p.longitude}}"></marker>
</div>
也做了这个:(这里显示的是图像,但是比例不起作用)
<div ng-repeat="p in points">
<marker icon="{url: '../../images/delta.png', scale: 10}" position="{{p.latitude}}, {{p.longitude}}"></marker>
</div>
但没有任何效果,图标显示得太大或根本没有显示。特别是我只想使用自定义比例的自定义图像。我看到很多其他帖子,他们在控制器中定义标记,但后来我不知道如何告诉&#39;我认为它应该使用控制器中的预定义标记。
答案 0 :(得分:8)
要缩放标记图标,您可以指定scaledSize
属性。
示例强>
var app = angular.module('mapApp', ['ngMap']);
app.controller('mapCntrl', function ($scope) {
$scope.points = [
{ "name": "Canberra", "latitude": -35.282614, "longitude": 149.127775 },
{ "name": "Melbourne", "latitude": -37.815482, "longitude": 144.983460 },
{ "name": "Sydney", "latitude": -33.869614, "longitude": 151.187451 }
];
$scope.customIcon = {
"scaledSize": [32, 32],
"url": "http://www.cliparthut.com/clip-arts/823/arrowhead-clip-art-823528.png"
};
});
&#13;
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">
<ng-map center="[-26.6875847,135.0857733]" style="height: 480px;" zoom="4">
<div ng-repeat="p in points">
<marker icon="{{customIcon}}" position="{{p.latitude}}, {{p.longitude}}" ></marker>
</div>
</ng-map>
</div>
&#13;