是否可以使用SignalR更新Google Map中的標記？

Question

就像標題所說，是否可以使用SignalR/jquery來更新地圖標記的顏色？

我正在一個網站上繪製一個地圖，顯示不同的實時狀態變化的單位，標記顏色應該反映這個功能的一部分。

它可以以某種方式完成，或者是在「運行時」設置顏色的唯一方法嗎？ 目前，地圖以藍色顯示我的所有標記都很好。

<script src="~/Scripts/GoogleAPI/markerclusterer.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script src="~/Scripts/GoogleAPI/oms.min.js"></script> 
<script> 
    var markerArray = [];  
    var usualColor = '0000FF'; 
    var spiderfiedColor = 'ffee22'; 
    var iconWithColor = function(color) { 
     return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' + 
      color + '|000000|ffff00'; 
    }; 
    var shadow = new google.maps.MarkerImage(
     'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png', 
     new google.maps.Size(37, 34), // size - for sprite clipping 
     new google.maps.Point(0, 0), // origin - ditto 
     new google.maps.Point(10, 34) // anchor - where to meet map location 
    ); 

    function initialize() { 
     var bounds = new google.maps.LatLngBounds(); 
     var iw = new google.maps.InfoWindow(); 
     var mapOptions = { 
      zoom: 12, 
      panControl: false, 
      zoomControl: false, 
      scaleControl: false, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
      }, 
      streetViewControl: false, 
      overviewMapControl: true, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     var oms = new OverlappingMarkerSpiderfier(map); 
     var mcOptions = { 
      maxZoom: 12 
     }; 
     var markerCluster = new MarkerClusterer(map, [], mcOptions); 

     //Overlapping marker spiderfier 
     oms.addListener('click', function(marker) { 
      iw.setContent(marker.desc); 
      iw.open(map, marker); 
     }); 
     oms.addListener('spiderfy', function(markers) { 
      for (var i = 0; i < markers.length; i++) { 
       markers[i].setIcon(iconWithColor(spiderfiedColor)); 
       markers[i].setShadow(null); 
      } 
      iw.close(); 
     }); 
     oms.addListener('unspiderfy', function(markers) { 
      for (var i = 0; i < markers.length; i++) { 
       markers[i].setIcon(iconWithColor(usualColor)); 
       markers[i].setShadow(shadow); 
      } 
     }); 

     //Populate data section 
     var addMarker = function(lat, lon, name, locationName, unitHref, wellName, runNo, taskDesc, lastDepth, activityMessage, modeMessage) { 
      var myLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon)); 

      bounds.extend(myLatlng); 

      // COMMENTED OUT CUSTOM MARKER DESCRIPTION TO SAVE SPACE 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       icon: iconWithColor(usualColor), 
       shadow: shadow, 
       maxWidth: 200 
      }); 
      marker.desc = content; 

      oms.addMarker(marker); 
      markerArray.push(marker); 
     }; 
     var populateUnits = function() { 
      @foreach (var location in Model.Location) 
      { 
       if (location.Value != null && location.Key != null) 
       { 
        @:addMarker('@location.Value.Latitude', '@location.Value.Longitude', '@location.Key.UnitName', '@location.Value.Name', '#', '@location.Key.ViewUnitContract.CurrentRun.Operation.WellContract.Name', '@location.Key.ViewUnitContract.CurrentRun.Id', '@location.Key.ViewUnitContract.CurrentRun.RunTask', '@location.Key.Depth', '@location.Key.ActivityMessage', '@location.Key.ModeMessage'); 
       } 
      } 
     }; 

     //Populate the units 
     populateUnits(); 
     //Add cluster 
     markerCluster.addMarkers(markerArray, true); 
     //Fit map 
     map.fitBounds(bounds); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

下面是我如何循環訪問數組。

function changeMarkers(myArray) { 
    for (var i = 0; i < myArray.length; i++) { 
     myArray[i].setIcon(iconWithColor('a51720')); 
    }; 
} 

現在，在這一點上我只是呼籲腳本，其工作的執行changeMarkers功能。我已經將markerArray從initialize函數中移出，但這也不起作用。

讓我澄清我想要做什麼。假設頁面加載，我與SignalR的連接加速並且沒有可用的實時數據。在我想更新標記的顏色之前，可能需要10秒或10個小時。

例如，假設兩個小時過去了，這就是我想要做的;

function someFunc() { 
    // Get a reference to the map object 
    // Loop through its array of markers 
    // if match between marker-id and SignalR data-id 
    // update color of marker 
} 

如果我只是通過markerArray循環在後腳本執行的第一次它只是每次都返回一個空集任意給定時間。 我那種丟在這裏:)

Answer 1

你可以通過調用setIcon()設置標記的顏色。在你的情況，當你從SignalR得到更新，做這樣的事情......

var markerToChange = findMarker(markerArray, dataFromSignalR); // implement findMarker() 
markerToChange.setIcon(iconWithColor(dataFromSignalR.color)); 

的更多細節資料... https://developers.google.com/maps/documentation/javascript/reference#Marker