Javascript 如何在ng地图标记（角度）中使用自定义图标？

我有包含纬度和经度的商店列表，我有特别的用户纬度和经度

当用户点击地图按钮时，地图上会显示两个标记，标识用户和店铺位置

如何更改这两个标记图标而不是默认标记A和B如何使用自己的自定义标记图标 一,

二,

angular.module（'myApp'，['ngMap']））
.controller（“myCntrl”，功能（$scope）{
var_lat1=12.904778；
变量1=77.585680；
$scope.lat=\u lat1；
$scope.lon=\u lon1；
$scope.positions=[{pos:[$scope.lat$scope.lon]，名称：“User”}]；
$scope.center=[$scope.lat，$scope.lon]；
$scope.viewMap=false；
$scope.updateMap=功能（经销商）{
$scope.lat1=经销商S_纬度；
$scope.lon1=经销商S_经度；
图标：'http://www.clker.com/cliparts/q/I/Q/u/Z/1/marker-hi.png',
$scope.positions=[{pos:[$scope.lat，$scope.lon]，名称：“用户”}，{pos:[dealer.S_纬度，dealer.S_经度]，名称：“商店”}；
$scope.viewMap=true；
$scope.path=[[$scope.lat，$scope.lon]，[dealer.S_纬度，dealer.S_经度]]；
}
$scope.dealers=[{
S_电子邮件\u id:“aditiya@gmail.com",
S_商店：“三星”，
门店名称：“Adtiya三星店”，
S_服务：“常规服务、软件故障、硬件故障”，
门店描述：“承接各类三星手机”，
门店简介：“承接各类三星手机”，
南纬：“12.93489905”，
S_经度：“77.57070772”，
S_clocation:“
}, {
S_电子邮件\u id:“rajs@gmail.com",
S_商店：“诺基亚”，
门店名称：“斯里兰卡沙克提移动服务”，
S_服务：“设置故障、常规服务、硬件故障”，
门店描述：“承接各类诺基亚手机”，
门店简介：“承接各类诺基亚手机”，
南纬：“12.9599264”，
S_经度：“77.5924983”，
S_clocation:“
}, {
S_电子邮件\u id:“sprtive23@gmail.com",
S_商店：“诺基亚、三星”，
门店名称：“太阳移动服务中心”，
S_服务：“定期服务、全面维护、移动屏蔽安装”，
门店描述：“承接各类诺基亚、三星手机”，
门店简介：“承接各类诺基亚、三星手机”，
南纬：“12.911229”，
S_经度：“77.519281”，
S_clocation:“
},
{
S_电子邮件\u id:“super@gmail.com",
S_商店：“诺基亚、三星”，
门店名称：“ragu移动服务中心”，
S_服务：“定期服务、全面维护、移动屏蔽安装”，
门店描述：“承接各类诺基亚、三星手机”，
门店简介：“承接各类诺基亚、三星手机”，
南纬：“12.909999”，
S_经度：“77.506871”，
S_clocation:“
}
]
}
)

.自定义标记{
字号：2em；
填充：10px；
背景：#fff；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
边框：#7F7F7F实心1px；
文本对齐：居中；
}
.自定义标记：在{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：7px 6px 0；
边框颜色：#fff透明；
显示：块；
宽度：0；
z指数：1；
左边距：-6px；
底部：-6px；
左：50%；
}
.自定义标记：之前{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：7px 6px 0；
边框颜色：#7F7F7F透明；
显示：块；
宽度：0；
z指数：0；
左边距：-6px；
底部：-7px；
左：50%；
}
标签上区分大小写的搜索





{{经销商.商店{u名称}}

{{dealer.S_Email_id}}

{{dealer.S_clocation}}

请阅读有关ng地图的自定义标记的文档：

编辑：完整代码如下

<ng-map zoom="12" center="{{lat}}, {{lon}}">

      <directions
      draggable="true"
      panel="directions-panel"
      travel-mode="DRIVING"
      origin="{{lat}}, {{lon}}"
      destination="{{lat1}}, {{lon1}}">
    </directions>

    <custom-marker id="can" position="canada" on-click="click()">
        <div>
            <b>Hi, USA</b>
            <img src="http://icons.iconarchive.com/icons/custom-icon-design/2014-world-cup-flags/32/USA-icon.png" />
        </div>
    </custom-marker>

</ng-map>

嗨，美国

不要使用自定义标记指令。如果标记数量过多（如200+），则会降低您的性能。而是使用标准标记的“icon”属性，如下所示：

<marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}" icon="{ url:'/assets/images/deal-indicator.png', scaledSize:[32,40], origin: [0,0], anchor: [16,40] }">

或者，首先构造一个图标对象并将其设置为标记：

var customIcon = {
    url: "/images/my-marker.png",
    scaledSize: new google.maps.Size(32, 40),
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(16, 40)
};

myMarker.setIcon(customIcon);

---

我是angular的新手，请帮助我。如果你不介意，请更新我的代码。我已经向你提供了答案，我不会为你编写代码，这不是StackOverflow的目的。实际上，我不知道我必须在哪里添加代码。我在挣扎这就是为什么我问sorryno我的期望。当用户单击地图按钮时，现在显示两个标记图标。如何在地图中显示两个不同的标记自定义标记图标，而不是两个标记图标？没有工作，请检查。

myMarker.setIcon('/assets/images/deal-indicator-selected.png');

var customIcon = {
    url: "/images/my-marker.png",
    scaledSize: new google.maps.Size(32, 40),
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(16, 40)
};

myMarker.setIcon(customIcon);