使用ngmap Angularjs的HTML中的客户标记

Question

我正在做一个项目,我使用带有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> 

但没有任何效果,图标显示得太大或根本没有显示.特别是我只想使用自定义比例的自定义图像.我看到很多其他帖子,他们在控制器中定义标记,但后来我不知道如何"告诉"我的视图它应该使用控制器中的预定义标记.

Answer 1

要缩放标记图标,您可以指定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"
    };

});

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