2012-11-17 123 views

回答

4

僅適用於API v2!

下面的代碼段創建兩個點之間的10個像素寬的紅色折線:

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

您可以找到的文檔here

+3

這對於已取消,將停止在2013年5月參加工作強烈建議不要使用此,並使用API​​第3版,而不是API第2版。 – duncan

48

下面是繪製一條線的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 
}); 

這只是在兩點之間畫出一條直線。如果你希望它是最短路徑,你需要考慮地球是彎曲的事實,並繪製測地線。要做到這一點,你必須使用谷歌地圖API在幾何庫,加入這個可選參數:

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

請參閱此鏈接:http://stackoverflow.com/questions/17377058/get-latlng-and-draw-a-polyline-between-that-two-latlng/17401013#17401013 – Anup

1

這會在兩點之間畫出一條線......並超出範圍。您只需繼續輸入新的地方到搜索框,它會繼續繪製最近的兩個點之間的點:

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

什麼是輸入應該是什麼樣子的?什麼是地方?拉長點? –

相關問題