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之间绘制，并且需要突出显示该折线段。我在标记的infoWindow中加入了时间。但是我无法根据它放置的时间来识别标记。实际上我需要跟踪一个flit，并希望根据用户选择的时间范围突出显示折线。关于这种情况，有人可以帮助我吗？

Answer 1

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

我添加了自定义字段作为标记的时间，并为其分配了时间，我将收到套接字消息。
在图表上绘制所有标记的维护数组。
使用underscore.js过滤了标记数组，并在指定的时间段内绘制标记。
在这些过滤的标记中绘制的折线（用于突出显示的颜色不同）。

Answer 2

我使用 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

谷歌地图折线突出显示

2 个答案: