Polyline上的工具提示（路線）懸停

我在地圖上製作了路線。使用一些座標生成的路線，其中完成了附加信息（速度）。我希望路線懸停時，會出現一個工具提示並在這些座標處顯示信息（速度）。我混淆瞭如何顯示速度的工具提示。Polyline上的工具提示（路線）懸停

<html> 
<head> 
    <title>Polyline Route v3 Example</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    var locations = [ 
     {"speed":"13","lat":"-6.246192976751192","lon":"106.79324626922607"}, {"speed":"33","lat":"-6.245723710157699","lon":"106.79603576660156"}, {"speed":"23","lat":"-6.245723710157699","lon":"106.79796695709229"}, {"speed":"43","lat":"-6.243334710069922","lon":"106.79800987243652"}, 
     {"speed":"12","lat":"-6.245723810157699","lon":"106.79796725709229"}, {"speed":"1","lat":"-6.245723860157699","lon":"106.79796735709229"}, {"speed":"45","lat":"-6.245723890157699","lon":"106.79797755709229"}, {"speed":"21","lat":"-6.245723910157699","lon":"106.79797895709229"} 
    ]; 
    var map; 
    function createRouteMap(){ 
    var listRoute = []; 
    for (var i = 0; i < locations.length; i++) { 
     listRoute.push(new google.maps.LatLng(locations[i].lat, locations[i].lon)); 
    } 
    var mapOptions = { 
     zoom: 16, 
     center: listRoute[Math.ceil(listRoute.length/2)], 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    showMap(listRoute); 
    createMarkers(locations); 
} 

function showMap(listRoute){ 
    if((listRoute.length < 1) || (listRoute == null)){ 
     jQuery("#map_canvas").html('<div class="alert alert-info"> <strong>Empty Trail!</strong> This trip still has no trail </div>'+ 
     '<div class="btn-toolbar"> <p><code>The gps device </code>in the car still not sent position!</p> </div>'); 
    }else{ 
     var flightPath = new google.maps.Polyline({ 
      path: listRoute, 
      strokeColor: "#FF0000", 
      strokeOpacity: 5, 
      strokeWeight: 3.7 
     }); 
     flightPath.setMap(map); 
    } 
} 

function createMarkers(locations) { 
    for (var i = 0; i < locations.length; i++) { 
     var point = locations[i]; 
     var myLatLng = new google.maps.LatLng(point.lat, point.lon); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: 'greencirclemarker.png', 
      title: point.speed 
     }); 
    } 
} 

$(document).ready(function() { 
    createRouteMap(); 
}); 

</script> 
</head> 
<body> 
<div id="map_canvas" style="height:400px; border:1px 00f solid;"></div> 
</body> 
</html>

來源

2013-03-15 Mahadi Siregar

您的「速度」與點相關聯。你有幾個選項：

添加標記，並顯示該標記的鼠標懸停的速度（或作爲標記的工具提示）
使線的每一段與一個單獨的折線它自己的mouseover事件處理程序。您需要指定如何將速度應用於線段。有一種更復雜的方法可以通過一條多段線來實現，但是對於一個mouseover事件可能會有性能問題。

來源

2013-03-15 20:54:01 geocodezip

第一個選項，如果這意味着我必須創建標記點數？我的意思是，如果我有10分，比我必須創造10個標記。是這樣嗎？ – 2013-03-18 02:54:27

是的。這似乎是最簡單的（因爲速度與那些相關）。 – geocodezip 2013-03-18 05:00:31

謝謝先生geocodezip，它的工作原理。我編輯了我的問題並插入了正確的代碼。 – 2013-03-19 08:57:51

Polyline上的工具提示（路線）懸停

回答

相關問題