jQuery का उपयोग कर Google मानचित्र पर दो बिंदुओं के बीच एक रेखा खींचना?

Question

jQuery या जावास्क्रिप्ट का उपयोग कर Google मानचित्र API के साथ दो बिंदुओं (अक्षांश और देशांतर) के बीच एक रेखा को कैसे आकर्षित करें? मुझे दो बिंदुओं के बीच सबसे छोटा रास्ता चाहिए। यह किसी भी प्रकार की रेखा हो सकती है।

Answer 1

केवल API v2 के लिए!

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

आप प्रलेखन here पा सकते हैं:

निम्नलिखित कोड का टुकड़ा दो अंक के बीच एक 10 पिक्सेल चौड़ा लाल पॉलीलाइन पैदा करता है।

Answer 2

यहां एक रेखा बनाने का एक एपीआई v3 तरीका है।

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

यह केवल दो बिंदुओं के बीच एक सीधी रेखा खींचता है। यदि आप इसे सबसे छोटा रास्ता होना चाहते हैं, तो आपको इस तथ्य के लिए जिम्मेदार होना चाहिए कि पृथ्वी घुमावदार है, और एक भूगर्भीय रेखा खींचती है। , यह वैकल्पिक पुस्तकालयों पैरामीटर जोड़कर आप गूगल मैप्स एपीआई में ज्यामिति पुस्तकालय का उपयोग करना होगा, ऐसा करने के लिए:

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

और फिर बस अपने पॉलीलाइन के लिए विकल्पों को geodesic: true जोड़ें:

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

Answer 3

यह दो बिंदुओं और उससे परे के बीच एक रेखा खींचता है। आप बस खोज बॉक्स में नए स्थानों में प्रवेश रखने के लिए और यह सबसे हाल ही में दो अंक के बीच स्थानों की प्लॉटिंग रखेंगे:

SEE WORKING EXAMPLE HERE

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> 

जे एस:

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

सीएसएस:

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

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

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