如何在Google地圖API中使用jQuery或Javascript在兩點(經度和緯度)之間畫線?我需要兩點之間的最短路徑。它可能是任何類型的線路。使用jQuery在谷歌地圖上的兩點之間繪製一條線?
13
A
回答
4
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
這會在兩點之間畫出一條線......並超出範圍。您只需繼續輸入新的地方到搜索框,它會繼續繪製最近的兩個點之間的點:
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
什麼是輸入應該是什麼樣子的?什麼是地方?拉長點? –
相關問題
- 1. Android谷歌地圖在兩點之間繪製一條路徑
- 2. 谷歌地圖上兩個座標之間的繪製線
- 3. 使用谷歌地圖在2點之間畫一條線
- 4. 如何繪製線條之間的谷歌地圖richmarkers
- 5. 在地圖上的點與點之間繪製線條?
- 6. 谷歌地圖:指定路線上兩點之間的距離
- 7. 兩個輸入之間的谷歌地圖API繪圖線
- 8. 谷歌地圖Google地圖兩點之間的路線
- 9. 在asp.net中繪製點谷歌地圖之間的路徑
- 10. 谷歌地圖上繪製路線
- 11. 我如何繪製谷歌地圖上的圖像,線條等
- 12. 如何在兩個位置之間使用兩種不同顏色在谷歌地圖上繪製多段線
- 13. 如何在谷歌地圖中的兩個標記之間繪製路線
- 14. 在谷歌地圖上繪製線條/路徑
- 15. 如何在谷歌地圖上繪製線條疊加Android
- 16. 谷歌地圖GDirections - 地圖上兩點之間的路線方向
- 17. 使用D3在谷歌圖表上繪製線條
- 18. 如何繪製谷歌地圖上2點之間的路徑的一部分?
- 19. 在谷歌地圖中畫一條垂直於兩點的線
- 20. 如何在繪圖函數的任意兩點之間繪製一條線?
- 21. 如何在opencv C++中的兩點之間繪製一條線
- 22. 谷歌地圖中兩點之間的多重摺線
- 23. 使用JavaScript在谷歌地圖上繪製虛線圓圈
- 24. 在谷歌靜態地圖上繪製兩個城市之間的路徑
- 25. 在谷歌地圖片段上繪製兩個LatLng之間的路徑
- 26. 使用Python在谷歌地圖上繪製點
- 27. 使用API在谷歌地圖上繪製多個點
- 28. 在兩個3D點之間繪製一條弧線
- 29. JavaFX - 在兩個節點之間繪製一條線
- 30. 使用谷歌地圖api工作兩點之間的距離?
你想要一條「直線」還是跟隨道路? – geocodezip