javascript - 带有 ngmap Angularjs 的 html 中的客户标记

Question

我正在做一个项目，我使用 ngmap 1.13.13 和 angularjs 在 map 上显示大量船只。我想在我的 map 上使用自定义标记。但我从来没有把它们放在我的 map 上，或者如果它们没有按比例缩放。我尝试了不同的方法，这里有两个:

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

但没有任何效果，图标要么显示太大，要么根本不显示。特别是我只想使用自定义比例的自定义图像。我看到很多其他帖子，他们在 Controller 中定义了标记，但后来我不知道如何“告诉”我的 View 它应该使用 Controller 中的预定义标记。

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>