在Google地图中结合DirectionsService和PlacesService

时间:2016-09-19 06:05:12

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

如何在Google地图中合并DirectionsService和PlacesService。我会在这条道路上激励http://www.indiaproperty.com/godrej-palm-grove-in-poonamallee-chennai-pl4110632?fr=sres2。我不能得到持续时间&每个地点的距离。我需要找到每个位置的距离和持续时间。我给出了以下代码:

var map;
var infowindow;
var markersArray = [];
var pyrmont = new google.maps.LatLng(20.268455824834792, 85.84099235520011);
var marker;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var places = [];
// var waypoints = [];                  
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: pyrmont,
        zoom: 14,
        zoomControl: false,
        scaleControl: false,
        scrollwheel: false,
        disableDoubleClickZoom: true,
    });
    infowindow = new google.maps.InfoWindow();
    //document.getElementById('directionsPanel').innerHTML='';
    search_types();
}
function createMarker(place,icon) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: icon,
        visible:true          
    });    
    markersArray.push(marker);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent("<b>Name:</b>"+place.name+"<br><b>Address:</b>"+place.vicinity+"<br><b>Reference:</b>"+place.reference+"<br><b>Rating:</b>"+place.rating+"<br><b>Id:</b>"+place.id);
        infowindow.open(map, this);
    });   
}
var source="";
var dest='';
function search_types(latLng){
    clearOverlays(); 
    if(!latLng){
        var latLng = pyrmont;
    }
    var placename = $('.nearby h3').attr("data-value")
    var type = $('#valueStored').val();
    var icon = "images/"+type+".png";
    var request = {
        location: latLng,
        radius: 2000,
        types: [type], //e.g. school, restaurant,bank,bar,city_hall,gym,night_club,park,zoo
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    $('.map-list').find('li').remove();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, function(results, status) {
        map.setZoom(14);
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                results[i].html_attributions='';
                places[i] = results[i];
                createMarker(results[i],icon);
                $('.map-list').append('<li>'+results[i].name+'<div><span class="distance"></span> <span class="duration"></span></div></li>');              
            }
        }        
    });   
    distanceCalc();
 }
var latadd, longadd;
function distanceCalc(latLng){
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    var changeaddress;
    var pyrmont1 = new google.maps.LatLng(20.268455824834792, 85.84099235520011);
    var request = {
        origin: pyrmont,
        destination: pyrmont1,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var listed = $('.map-list li');
            console.log(places[4]);
            for (var i = 0; i < listed.length; i++) {   
                $('.distance').text(response.routes[0].legs[0].distance.value);
                $('.duration').text(response.routes[0].legs[0].duration.value);
            }
            // Display the distance:
            directionsDisplay.setDirections(response);
        }
    });
}
function showResult(result) {
    latadd = result.geometry.location.lat();
    longadd = result.geometry.location.lng();
}
// Deletes all markers in the array by removing references to them
function clearOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setVisible(false)
        }
        //markersArray.length = 0;
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
function clearMarkers(){
    $('#show_btn').show();
    $('#hide_btn').hide();
    clearOverlays()
}
function showMarkers(){
    $('#show_btn').hide();
    $('#hide_btn').show();
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setVisible(true)
        }         
    }
}

0 个答案:

没有答案