【问题标题】:Google maps, distance text dissapears after dragging the route谷歌地图,拖动路线后距离文字消失
【发布时间】:2015-06-13 11:10:22
【问题描述】:

终于让我的谷歌地图可拖动方向工作了,但在我拖动路线后,几行文字消失了:(“Trumpiausia distancija tarp dviejų lokacijų, važiuojant keliais:”)- 总距离和(“Apytikslis kelionės laikas: “) - 总时间。虽然显示了总距离并且可以完美地重新计算。

任何想法如何解决它?我知道这是一个简单的问题,但我是 javascript 新手。 谢谢

var location1;
var location2;

var address1;
var address2;

var latlng;
var geocoder;
var map;

var distance;

// finds the coordinates for the two locations and calls the showMap() function
function initialize()
{
    geocoder = new google.maps.Geocoder(); // creating a new geocode object

    // getting the two address values
    address1 = document.getElementById("address1").value;
    address2 = document.getElementById("address2").value;

    // finding out the coordinates
    if (geocoder) 
    {
        geocoder.geocode( { 'address': address1}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of first address (latitude + longitude)
                location1 = results[0].geometry.location;
            } else 
            {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        geocoder.geocode( { 'address': address2}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of second address (latitude + longitude)
                location2 = results[0].geometry.location;
                // calling the showMap() function to create and show the map 
                showMap();
            } else 
            {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
}

// creates and shows the map
function showMap()
{
    // center of the map (compute the mean value between the two locations)
    latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

    // set map options
        // set zoom level
        // set center
        // map type
    var mapOptions = 
    {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    // create a new map object
        // set the div id where it will be shown
        // set the map options
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



  var rendererOptions = {
 draggable: true};
     // show route between the points
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    directionsDisplay.setMap(map);
    var request = {
        origin:location1, 
        destination:location2,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

    directionsService.route(request, function(response, status) 
    {
        if (status == google.maps.DirectionsStatus.OK) 
        {
            directionsDisplay.setDirections(response);
            distance = "Trumpiausia distancija tarp dviejų lokacijų, važiuojant keliais: "  +response.routes[0].legs[0].distance.text;
            distance += "<br/>Apytikslis kelionės laikas: " +response.routes[0].legs[0].duration.text;
            document.getElementById("distance_road").innerHTML = distance;
        }
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value
}
total = total / 1000.0;
document.getElementById('distance_road').innerHTML = total + ' km';

}
 google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
    });

    });
    // show a line between the two points
    var line = new google.maps.Polyline({
        map: map, 
        path: [location1, location2],
        strokeWeight: 7,
        strokeOpacity: 0.8,
        strokeColor: "#FFAA00"
    });

    // create the markers for the two locations     
    var marker1 = new google.maps.Marker({
        map: map, 
        position: location1,
        title: "First location"
    });
    var marker2 = new google.maps.Marker({
        map: map, 
        position: location2,
        title: "Second location"
    });

    // create the text to be shown in the infowindows
    var text1 = '<div id="content">'+
            '<h1 id="firstHeading">First location</h1>'+
            '<div id="bodyContent">'+
            '<p>Coordinates: '+location1+'</p>'+
            '<p>Address: '+address1+'</p>'+
            '</div>'+
            '</div>';

    var text2 = '<div id="content">'+
        '<h1 id="firstHeading">Second location</h1>'+
        '<div id="bodyContent">'+
        '<p>Coordinates: '+location2+'</p>'+
        '<p>Address: '+address2+'</p>'+
        '</div>'+
        '</div>';

    // create info boxes for the two markers
    var infowindow1 = new google.maps.InfoWindow({
        content: text1
    });
    var infowindow2 = new google.maps.InfoWindow({
        content: text2
    });

    // add action events so the info windows will be shown when the marker is clicked
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map,marker1);
    });
    google.maps.event.addListener(marker2, 'click', function() {
        infowindow2.open(map,marker1);
    });

    // compute distance between the two points
    var R = 6371; 
    var dLat = toRad(location2.lat()-location1.lat());
    var dLon = toRad(location2.lng()-location1.lng()); 

    var dLat1 = toRad(location1.lat());
    var dLat2 = toRad(location2.lat());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(dLat1) * Math.cos(dLat1) * 
            Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;

    document.getElementById("distance_direct").innerHTML = "<br/>Atstumas tarp dviejų lokacijų (tiesią liniją) : "+d;
}

function toRad(deg) 
{
    return deg * Math.PI/180;
}

【问题讨论】:

    标签: javascript google-maps-api-3 draggable


    【解决方案1】:

    自己发现了,也许对别人有用。

        function computeTotalDistance(result) {
     var distance = 0;
     var myroute = result.routes[0];
     for (var i = 0; i < myroute.legs.length; i++) {
     distance += myroute.legs[i].distance.value;
    }
    distance = distance / 1000.0;
    document.getElementById('distance_road').innerHTML ="Distancija tarp dviejų lokacijų, važiuojant keliais: "+distance + ' km';
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-12-12
      • 1970-01-01
      • 2014-08-12
      • 2016-09-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多