Как нарисовать линию между двумя точками (широта и долгота) с помощью API карт Google, используя jQuery или Javascript? Мне нужен самый короткий путь между двумя точками. Это может быть любой тип линии.
Нарисуйте линию между двумя точками на карте Google, используя jQuery?
Ответ 1
Только для API v2!
Следующий фрагмент кода создает красную полилинию шириной 10 пикселов между двумя точками:
var polyline = new GPolyline([
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519)],
"#ff0000", 10);
map.addOverlay(polyline);
Вы можете найти документацию здесь.
Ответ 2
Здесь 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 Карт Google, добавив этот параметр дополнительных библиотек:
<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
});
Ответ 3
Это рисует линию между двумя точками... и далее. Вы просто продолжаете вводить новые места в поисковую строку, и она будет продолжать строить точки между двумя последними пунктами:
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;
}