3

地図上にルートを作りました。追加情報 (速度) で完了したいくつかの座標を使用して生成されたルート。ルートにカーソルを合わせると、ツールチップが表示され、それらの座標に情報 (速度) が表示されます。速度のツールチップの表示方法がわかりません。

<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>
4

1 に答える 1

3

あなたの「速度」はポイントに関連付けられています。いくつかのオプションがあります。

  1. マーカーを追加し、マーカーのマウスオーバーで速度を表示します (またはマーカーのツールチップとして)

  2. 線の各セグメントを、独自のマウスオーバー イベント ハンドラーを持つ個別のポリラインとしてレンダリングします。線分に速度を適用する方法を指定する必要があります。単一のポリラインでこれを行うにはもっと複雑な方法がありますが、マウスオーバー イベントではパフォーマンスの問題が発生する可能性があります。

于 2013-03-15T20:54:01.727 に答える