5

次の要件があります

  1. 出発地から目的地までの道順を表示
  2. ユーザーの現在地を表示します。

道順を含む地図を作成し、その上にユーザーの現在地を表示しています。

function showDirection(orgn, dstntn)
{
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();

    var map = new google.maps.Map(document.getElementById('displayMap'), {
        zoom : 7,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('displayDirections'));

    var request = {
        origin : orgn,
        destination : dstntn,
        travelMode : google.maps.DirectionsTravelMode.WALKING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
    var win = function(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            var myLatlng = new google.maps.LatLng(lat, long);
            var iconimage="images/current_location_small.png";
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
                icon: iconimage
            });

            marker.setMap(map);
     };

     var fail = function(e) {
            alert('Can\'t retrieve position.\nError: ' + e);
        };

     var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}

上記のコードは、ユーザーがルートを表示するために作成されたマップ内にいる場合は正常に機能しますが、ユーザーがマップ エリアの外にいる場合、現在の場所は表示されません。

私はどういうわけか、1.出発地、2.目的地、3.ユーザーの場所の3つのポイントすべてを地図に収めたいと思っています。3 つのポイントすべてに合わせてマップをズームアウトする方法や、3 つのポイントすべてが表示されるように元のマップを作成する方法はありますか?

4

1 に答える 1

4

の後に以下を追加marker.setMap(map);

marker.setMap(map);
//Add these lines to include all 3 points in the current viewport
var bounds = new google.maps.LatLngBounds();
bounds.extend(orgn);
bounds.extend(dstntn);
bounds.extend(myLatlng);
map.fitBounds(bounds);
于 2012-09-08T09:25:23.390 に答える