javascript - Showing current location + directions using google maps API and phonegap? - Stack Overflow

admin管理员组

文章数量:1394127

I have following requirements

1. Show directions from point of origin to destination
2. Show user's current location.

I am creating a map with directions and then displaying user's current location on that.

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);
}

The above code works fine if the user is within the map created for showing directions, but if the user is out of the map area, his current location is not shown.

I somehow want all the three points 1. origin, 2. destination and 3. user location to fit on the map. Is there a way I can zoom the map out to fit all three points, or create original map in a way that all three points are visible.

I have following requirements

1. Show directions from point of origin to destination
2. Show user's current location.

I am creating a map with directions and then displaying user's current location on that.

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);
}

The above code works fine if the user is within the map created for showing directions, but if the user is out of the map area, his current location is not shown.

I somehow want all the three points 1. origin, 2. destination and 3. user location to fit on the map. Is there a way I can zoom the map out to fit all three points, or create original map in a way that all three points are visible.

• javascript
• jquery
• google-maps
• cordova
• google-maps-api-3

Share Improve this question Follow asked Sep 7, 2012 at 10:14 KamalKamal 5,52288 gold badges4646 silver badges5858 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Add the following after 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);

本文标签： javascriptShowing current locationdirections using google maps API and phonegapStack Overflow