使用jQuery在Google地图上的两点之间划一条线？
如何使用jQuery或Javascript在Google地图API中绘制两点（纬度和经度）之间的线？ 我需要两点之间的最短路径。 它可以是任何类型的线。
仅适用于API v2！
以下代码段在两点之间创建一个10像素宽的红色折线：
var polyline = new GPolyline([ new GLatLng(37.4419, -122.1419), new GLatLng(37.4519, -122.1519)], "#ff0000", 10); map.addOverlay(polyline); 你可以在这里找到文档。
这是绘制线条的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 });
这只是在两点之间画一条直线。 如果你想要它是最短的路径 ，你需要考虑地球是弯曲的事实，并绘制一个测地线。 为此，您必须通过添加此可选库参数来使用Google Maps API中的几何库：
然后只需添加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 });
这在两点之间划出了界限…… 您只需继续在搜索框中输入新位置，它就会不断绘制最近两点之间的点数：
在这看到工作示例
HTML：
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()+"
"; 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
"; 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; }