Vẽ một đường thẳng giữa hai điểm trên bản đồ Google bằng jQuery?

Question

Làm cách nào để vẽ một đường thẳng giữa hai điểm (Vĩ độ và Kinh độ) với API bản đồ của Google bằng jQuery hoặc Javascript? Tôi cần con đường ngắn nhất giữa hai điểm. Nó có thể là bất kỳ loại dòng nào.

Answer 1

Chỉ dành cho API v2!

Đoạn mã sau tạo một polyline đỏ 10-pixel rộng giữa hai điểm:

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

Bạn có thể tìm thấy tài liệu here.

Answer 2

Đây là cách vẽ v3 của API 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 
}); 

Điều này chỉ đơn giản là vẽ một đường thẳng giữa hai điểm. Nếu bạn muốn nó là đường dẫn ngắn nhất , bạn cần tính đến thực tế rằng trái đất bị cong và vẽ một đường trắc địa. Để làm điều đó, bạn phải sử dụng các hình học thư viện trong API của Google Maps, bằng cách thêm này không bắt buộc thư viện tham số:

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

Và sau đó chỉ cần thêm geodesic: true để các tùy chọn cho Polyline của bạn:

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

Điều này vẽ một đường thẳng giữa hai điểm ... và xa hơn nữa. Bạn chỉ cần giữ vào địa điểm mới vào hộp tìm kiếm và nó sẽ tiếp tục vẽ điểm giữa hai điểm gần đây nhất:

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> 

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