2016-11-08 100 views
2

我想爲我的多行繪製方向箭頭。 我的代碼不顯示箭頭,但使用我的數據集繪製每個標記與信息窗口和多行。 我想添加這樣的箭頭。 http://jsfiddle.net/nX8U8/2/ 這裏是我的代碼與ajax回調函數.done。方向箭頭不顯示,但折線顯示在谷歌地圖

有人可以解釋我做了什麼錯。

var path1 = []; var poliLine;

function getData(){ 

    $.ajax({ 
     url: '/filter', 
     dataType:'json', 
     type: 'POST', 
     data: {'mmsi':$('input[name=mmsi]').val(),'from': $("input[name='from']").val(), 'to': $("input[name='to']").val()} 

    }).done(function(data) { 
     initMap(); 
     console.log(data.length); 
     console.log(data); 
     $.each(data, function(index, obj){ 
      console.log(obj.latitude + " - " +obj.longitude ); 
      //console.log("helloooo"); 
      var pos = {lat: obj.latitude, lng: obj.longitude}; 
      path1.push({lat: parseFloat(obj.latitude), lng: parseFloat(obj.longitude)}); 

      contentString = "<p>" +obj.last_received_date+ "<br>"+obj.last_received_time+"</p>"; 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 
      var circleIcon = { 
       path: google.maps.SymbolPath.CIRCLE, 
       fillColor: '#600d48', 
       fillOpacity: 0.8, 
       scale: 2, 
       strokeColor: '#600d48' 
      }; 
      var pathMarker = new google.maps.Marker({ 
       position: pos, 
       icon: circleIcon, 
       map: map 
      }); 
      pathMarker.addListener('mouseover', function() { 
       infowindow.open(map, pathMarker); 
      }); 
      // assuming you also want to hide the infowindow when user mouses-out 
      pathMarker.addListener('mouseout', function() { 
       infowindow.close(); 
      }); 

     }); 
     var lineSymbol = { 
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW 
     }; 

     var polylineoptns = { 
      strokeOpacity: 0.8, 
      strokeWeight: 3, 
      path: path1, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      map: map, 
      icons: [{ 
       icon: lineSymbol, 
       repeat: '70px', 
       offset: '100%' 
      }], 
     }; 
     polyline = new google.maps.Polyline(polylineoptns); 

     path1 = []; 

    }).always(function() { 

    }).fail(function(jqXHR, textStatus, errorThrown) { 
     alert('Error: ' + errorThrown); 
    }) 

} 

回答

0

我可以通過繪製箭頭圖標與軸承的旋轉是由谷歌的位置更新的屬性標記做到這一點。