【问题标题】:NgMap set marker colorNgMap 设置标记颜色
【发布时间】:2024-01-23 13:51:02
【问题描述】:

我在我的网络应用程序中使用ng-map。在地图视图中,我使用marker 显示不同的位置。我想根据我在对象内部获得位置的isOpned 字段来更改每个标记的颜色。我尝试将background-color 样式添加到我的标记中,但没有任何反应。

这是我的代码:

<ng-map zoom-to-include-markers="auto" 
         id="map"
         map-type-id="ROADMAP"
         street-view-control-options="{position: 'LEFT_CENTER'}">

   <marker ng-repeat="p in paths" position="{{p.positions}}"></marker>

</ng-map>

【问题讨论】:

    标签: javascript angularjs google-maps marker ng-map


    【解决方案1】:

    ng maps 修改代码(因为帖子中没有添加示例代码)这是个好主意

    Plunker演示

    JS

    var app = angular.module('myApp', ['ngMap']);
    
    app.controller('mapController', function($interval) {
      var vm = this;
      vm.positions =[
        [40.71, -74.21], [40.72, -74.20], [40.73, -74.19], [40.74, -74.18],
        [40.75, -74.17], [40.76, -74.16], [40.77, -74.15], [40.77, -74.15]
      ];
    var colorsDynamic=['ff8a80','880e4f','4a148c','311b92','3d5afe','76ff03','f57c00','5d4037']
      $interval(function() {
        var numMarkers = Math.floor(Math.random() * 4)+4; //between 4 to 8 markers
        vm.positions = [];
        vm.icon=[];//empty array of icon
        for (i = 0; i < numMarkers; i++) {
          var lat = 40.71 + (Math.random() / 100);
          var lng = -74.21 + (Math.random() / 100);
          vm.positions.push([lat, lng]);
          //pushing dynamic icon color
          vm.icon.push('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|'+colorsDynamic[i]) 
    
        }
      }, 2000);
    });
    

    HTML

    <div ng-controller="mapController as vm">
    <ng-map zoom="14" center="[40.71, -74.21]">
      <marker ng-repeat="p in vm.positions track by $index" position="{{p}}" icon="{{vm.icon[$index]}}"></marker>
    </ng-map>
    

    【讨论】:

    • 谢谢,我测试了它,它可以工作,但我有一些问题:因为我正在使用集群ngmap.github.io/#/!marker-clusterer.html,当我放大查看标记时,我得到了一个绿色标记,下面是一个部分默认的红色。
    • 你能重新创建 plunker 演示吗
    • 很抱歉我现在不能提供 plunker 演示:/
    • 但是由于您的答案响应了我在 issu 中指定的内容,并且我在删除集群代码后对其进行了测试并且它可以工作,所以我接受它:)
    • 非常感谢,我找到了第二个问题的解决方案*.com/questions/43942610/…。再次感谢您!