1

私は Google Maps API を初めて使用し、これまでに多くの問題に遭遇しました。

チェックボックスの配列によって決定される緯度座標からウェイポイントをマッピングしようとしています。

完全な私のjsファイルは次のとおりです。

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


var waypts = [];
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");


    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }
}

var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    console.log("mapping...");

    if(status == google.maps.DirectionsStatus.NOT_FOUND)
    {
        console.log("Could not one or more of locations");
    }
});

ページが読み込まれると、マップが表示され、「マッピング...」がコンソールに表示されます。calcRoute 送信ボタンを押しても何も起こりません。緯度/経度とウェイポイント オブジェクトをログに記録したので、それらがその時点に達していることはわかっていますが、ルートが再計算されることはないようです。

私は本当にこれに関する基本的なデモが必要ですが、私が見つけた唯一のものは、ほとんどすべてに使用したものですが、結果は得られません: Google Example Directions Waypoints

4

2 に答える 2

1

現在、ルートを表示するためのdirectionDisplay.setDirections()の呼び出しがないため、スクリプトはルートを表示しません。

また、directionService.route() の呼び出しを calcRoute 関数に入れる必要があります。

固定コード:

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);

function initialize() 
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(41.850033, -87.6500523)
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);

}

function calcRoute()
{
    var checkboxArray = document.getElementsByName("waypoints[]");
    var waypoints=[];

    for (var i = 0; i < checkboxArray.length; i++) 
    {
        if (checkboxArray[i].checked) 
        {
            var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
            var lng = parseFloat(checkboxArray[i].attributes["lng"].value);

            waypts.push({
                location: new google.maps.LatLng(lat, lng),
                stopover: true
            });
        }
    }


var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
    if(status == google.maps.DirectionsStatus.OK)
    {
        //print the route
        directionsDisplay.setDirections(response);
    }
    else
    {
      console.log('something went wrong',status);
    }

});
}
</script>
于 2012-07-06T21:56:25.250 に答える
0

Javascript がページの HTML にどのように関連しているかについての情報はあまりありません。しかし、この行

var checkboxArray = document.getElementsByName("waypoints[]");

おそらくあるはずです

var checkboxArray = document.getElementsByName("waypoints");

すべてのチェックボックスの名前がwaypoints.

引用符内にあるものは、チェックボックス要素の名前と正確に一致する必要があるため、各チェックボックスに名前がある場合waypoint(各チェックボックスは単一のウェイポイントをマークするため、これは可能性があります)、.getElementsByName("waypoint")その名前を持つすべての要素を見つけるために使用する必要があります。

于 2012-07-06T21:45:30.853 に答える