谷歌地图折线突出显示

Question

我目前正在使用 google maps v3 绘制实时 gps 位置并按以下顺序绘制折线。

     var markers[];
        socket.on(foo, function(msg){
        markers.push({
        "title": 'Location: ('+ address+ '), Time:'+time+',
        "lat": msg.lat,
        "lng": msg.lng,
        "description":'<b>Location: '+ address+'<br>Time: time,
       });
var marker = new google.maps.Marker({  // put marker
            position: {lat:msg.lat, lng:msg.lng},
            map: map,
            icon: iconURL,
            time:d, 
            title: 'Location: ('+ address+ '), Time:'+time+'
        });

         //draw polyline between current and previous marker
        });

我需要确定在上午 9.40 到上午 10.00 之间绘制了哪些标记，并且需要突出显示该段折线。我在标记的信息窗口中附加了时间。但是我无法根据标记的时间来识别标记。实际上我需要跟踪一个 flit 并希望根据用户选择的时间范围突出显示折线。有人可以帮我解决这种情况吗？

Answer 1

我使用 gmapsjs 在地图上显示标记。

map = undefined
infoWindows = []

loadResults = (data) ->
  data = data.companies
  map.removeMarkers()
  markers_data = []
  if data.length > 0
    i = 0
    while i < data.length
      item = data[i]
      if item.latitude != undefined and item.longitude != undefined
        markers_data.push
          lat: item.latitude
          lng: item.longitude
          title: item.name
          comp_id: item.id
          icon: window.location + item.marker_file
          infoWindow: content: ''
          mouseover: (e) ->
            #close all infowindows and open current marker's infowindow
            infoWindows.push @infoWindow
            closeAllInfoWindows()
            @infoWindow.open @map, this
            return
      i++
  map.addMarkers markers_data
  return


getData = (ids, url) ->
  #send ajax and get the json data.
  $.ajax(
    url: url
    type: 'GET'
    dataType: 'json'
    data: 'id': 'somevalue').done (data) ->
    closeAllInfoWindows()
    loadResults data
    return
  return

closeAllInfoWindows = ->
  infoWindows.forEach (entry) ->
    entry.close()
    return
  return

$(document).ready ->
  map = new GMaps(
    div: '#map'
    lat: 42342
    lng: 42342)
  map.on 'marker_added', (marker) ->
    index = map.markers.indexOf(marker)
    $('#results').append '<li><a href="#" class="pan-to-marker" 'data-marker-index="' + index + '">' + marker.title + '</a></li>'
    if index == map.markers.length - 1
      map.fitZoom()
    return
  #Load all data when page is loaded for first time or refreshed.
  return

#script to bring the marker to the screen center
$(document).on 'click', '.pan-to-marker', (e) ->
  e.preventDefault()
  position = undefined
  lat = undefined
  lng = undefined
  $index = undefined
  $index = $(this).data('marker-index')
  position = map.markers[$index].getPosition()
  lat = position.lat()
  lng = position.lng()
  map.setCenter lat, lng
  return

Answer 2

我找到了解决方案，按照以下步骤进行。

1. 我添加了自定义字段作为标记的时间，并为其分配了我在套接字消息上收到的时间。

2. 在图表上绘制的所有标记的维护数组。

3. 在请求的时间段内使用 underscore.js 过滤标记数组，以在该时间段之间绘制标记。

4. 在这些过滤的标记中绘制折线（用不同的颜色突出显示）。