web-dev-qa-db-fra.com

Tracez une ligne entre deux points sur une carte Google en utilisant jQuery?

Comment tracer une ligne entre deux points (Latitude et Longitude) avec l'API Google map en utilisant jQuery ou Javascript? J'ai besoin du chemin le plus court entre les deux points. Il peut s'agir de n'importe quel type de ligne.

javascriptjquerygoogle-mapsgoogle-maps-api-3
17
Vikas

Pour l'API v2 uniquement!

L'extrait de code suivant crée une polyligne rouge de 10 pixels de large entre deux points:

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)],
  "#ff0000", 10);
map.addOverlay(polyline);

Vous pouvez trouver la documentation ici.

5
Gurpreet Singh

Voici une façon API v3 de tracer une ligne.

var line = new google.maps.Polyline({
    path: [
        new google.maps.LatLng(37.4419, -122.1419), 
        new google.maps.LatLng(37.4519, -122.1519)
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    map: map
});

Cela trace simplement une ligne droite entre deux points. Si vous voulez que ce soit le chemin le plus court, vous devez tenir compte du fait que la terre est courbée et tracer une ligne géodésique. Pour ce faire, vous devez utiliser la bibliothèque geometry dans l'API Google Maps, en ajoutant ce paramètre facultatif bibliothèques:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

Et puis ajoutez simplement geodesic: true aux options de votre Polyline:

var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    geodesic: true,
    map: map
});
61
duncan

Cela trace une ligne entre deux points ... et au-delà. Vous continuez simplement à entrer de nouveaux endroits dans la boîte de recherche et il continuera à tracer les points entre les deux points les plus récents:

VOIR EXEMPLE DE TRAVAIL ICI

HTML: 

<div id="inputDiv">
    <input id="startvalue" type="text" width="90" value="" autofocus placeholder="Keep Adding Places and searching...">
</div>
<div id="map"></div>
<div id="results"></div>

JS: 

var geocoder;
var map;
var location1;
var location2;

$(document).ready(function(){
    initialize();    
    $("#startvalue").on('keydown',function(event){
        if (event.keyCode == 13 ) {
            createLine();
            $(this).val("");
            $(this).focus();
        }
    });

})

function initialize(){
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(7.5653, 80.4303);
    var mapOptions = {
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    setZoom();

    var input = /** @type {HTMLInputElement} */(
    document.getElementById('startvalue'));

    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

}

var address;
var address2;
function createLine(){

    if (address){
        address2 = document.getElementById('startvalue').value;     
    } else {
        address = document.getElementById('startvalue').value;     
    }

    var temp, temp2;

    geocoder.geocode({ 'address': address }, function (results, status) {
        // if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
        temp = results[0].geometry.location;
        if (address2){
            geocoder.geocode({ 'address': address2 }, function (results, status) {
                // if (status != "OK") alert("geocode of address:"+address+" failed, status="+status);
                temp2 = results[0].geometry.location;
                document.getElementById('results').innerHTML += temp2.toUrlValue()+"<br>";

                var route = [
                    temp,
                    temp2
                ];

                var polyline = new google.maps.Polyline({
                    path: route,
                    strokeColor: "#FF5E56",
                    strokeOpacity: 0.6,
                    strokeWeight: 5
                });
                location1 = convertLocationToLatLong(temp.toUrlValue())
                location2 = convertLocationToLatLong(temp2.toUrlValue())



                var lengthInMeters = google.maps.geometry.spherical.computeLength(polyline.getPath());
                document.getElementById('results').innerHTML += "Polyline is "+lengthInMeters+" meters long<br>";

                polyline.setMap(map);
                plotMap(location1,location2);
            });   
            address = address2;          
        } else {
            location1 = convertLocationToLatLong(temp.toUrlValue());
            plotMap(location1);
        }
    });
}

function convertLocationToLatLong(location){
    var location = location.split(',').map(function(item) {
        return parseFloat(item);
    });
    return location
}

function plotMap(location1,location2){
    var location1 = new google.maps.LatLng(location1[0],location1[1]);
    if (location2){
        var location2 = new google.maps.LatLng(location2[0],location2[1]);      
    }
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(location1);
    if(location2){
        bounds.extend(location2);    
    }
    map.fitBounds(bounds);       
    setZoom();
}

function setZoom(){
    google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
            google.maps.event.removeListener(zoomChangeBoundsListener);
        });
    });
    map.initialZoom = true;
}

CSS: 

#map {
    margin: 0;
    padding: 0;
    height: 400px;
    margin-top:30px;
   width:100%;
}

#inputDiv{
    position:absolute;
    top:0;
}

#startvalue{
  width:300px;
  padding:8px;
}
1
maudulus