Google Maps载入路线

Question

I've got a google map route in the form of the following string

NewRoute = '{"start":{"lat":51.5479454,"lng":-0.04057739999996102},"end":{"lat":51.5166787,"lng":-0.0596227999999428},"waypoints":[[51.5474343,-0.07557889999998224]]}';

which I want to load onto a map. How do I convert the string NewRoute into the array os so it can be used in the following function?

function showRoute(oViewMapButton)
{
    ButtonName = oViewMapButton.name;
    if(ButtonName.length == 13){
            var RouteName = "strWayPoints_r" + ButtonName.slice(-1);
            var DistanceName = "strDistance_r" + ButtonName.slice(-1);
    }else{
        var RouteName = "strWayPoints_r" + ButtonName.slice(-2);
        var DistanceName = "strDistance_r" + ButtonName.slice(-2);
    }

    oRoute = document.getElementById(RouteName);
    var NewRoute = oRoute.value;

    var os = [];
    os = NewRoute;

    var wp = [];
    for(var i=0;i<os.waypoints.length;i++)
    wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),'stopover':false }


    $( "#hid_FieldName3" ).val(DistanceName);
    $( "#map-form" ).dialog( "open" );

    var request = {
        origin:new google.maps.LatLng(os.start.lat,os.start.lng),
        destination:new google.maps.LatLng(os.end.lat,os.end.lng),
        waypoints: wp,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
        }
    });
 }

Answer 1

How did you get that string? It looks like a javascript object. If you assign it without the outer quotes, you will get an object and can use it like this:

var route = {
    "start": {"lat": 51.5479454, "lng": -0.04057739999996102},
    "end": {"lat": 51.5166787, "lng": -0.0596227999999428},
    "waypoints": [[51.5474343, -0.07557889999998224]]
};

route.start
route.start.lat
route.waypoints[0][1]
etc.

About javascript objects:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Answer 2

Assuming that the JSON is the value of the element with the RouteName id, just amend the following line:

var NewRoute = oRoute.value;

to:

var NewRoute = JSON.parse(oRoute.value);

Answer 3

You may try this (just convert the json into an object)

var NewRoute = '{"start":{"lat":51.5479454,"lng":-0.04057739999996102},"end":{"lat":51.5166787,"lng":-0.0596227999999428},"waypoints":[[51.5474343,-0.07557889999998224]]}';
var os = JSON.parse(NewRoute);

So, now you can use it like, os.start.lat or os.waypoints.length in your function.

In your function, replace following line

var NewRoute = oRoute.value;

with following line

var NewRoute = JSON.parse(oRoute.value);

That's it.