Google Maps v3在两点之间创建路线 [英] Google Maps v3 Create routes between two points
本文介绍了Google Maps v3在两点之间创建路线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Google地图API开发Web应用程序。我试图创建一个两点之间的路线,但由于某种原因,我还没有想出如何创建它。以下是我的代码,请让我知道是否有我缺少的东西。谢谢。
< script>
var Center = new google.maps.LatLng(18.210885,-67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
函数initialize(){
directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
center:Center,
zoom:20,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById(map),properties);
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({
position:Center,
animation:google.maps.Animation.BOUNCE,
});
marker.setMap(map);
函数Route(){
var start = new google.maps.LatLng(18.210885,-67.140884);
var end = new google.maps.latLng(18.211685,-67.141684);
var request = {
origin:start,
destination:end,
travelMode:google.maps.TravelMode.WALKING
};
directionsService.route(request,function(result,status){
if(status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window,'load',initialize);
< / script>
解决方案
- 呼叫路线功能
更改:
var end = new google.maps.latLng(18.211685,-67.141684);
到:
var end = new google.maps.LatLng(18.211685,-67.141684);
(javascript区分大小写,浏览器在javascript控制台中报告错误)
代码片段:
var Center = new google.maps.LatLng(18.210885,-67.140884); var directionsDisplay; var directionsService = new google。 maps.DirectionsService(); var map;函数initialize(){directionsDisplay = new google.maps.DirectionsRenderer(); var properties = {center:Center,zoom:20,mapTypeId:google.maps.MapTypeId.SATELLITE}; map = new google.maps.Map(document.getElementById(map),properties); directionsDisplay.setMap(地图); var marker = new google.maps.Marker({position:Center,animation:google.maps.Animation.BOUNCE,}); marker.setMap(地图); Route();}函数Route(){var start = new google.maps.LatLng(18.210885,-67.140884); var end = new google.maps.LatLng(18.211685,-67.141684); var request = {origin:start,destination:end,travelMode:google.maps.TravelMode.WALKING}; directionsService.route(request,function(result,status){if(status == google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(result);} else {alert(could not get directions:+ status) ;}});} google.maps.event.addDomListener(window,'load',initialize);
html,body,#map {margin:0;填充:0; height:100%;}
< script src = https://maps.googleapis.com/maps/api/js?sensor=false\"></script><div id =map>< / div>
I'm using the Google Maps API to develop a web application. I am trying to create a route between two points but for some reason I haven't figured out how create it. Below is my code, please let me know if there is something I am missing. Thank you.
<script>
var Center=new google.maps.LatLng(18.210885,-67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
center:Center,
zoom:20,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
map=new google.maps.Map(document.getElementById("map"), properties);
directionsDisplay.setMap(map);
var marker=new google.maps.Marker({
position:Center,
animation:google.maps.Animation.BOUNCE,
});
marker.setMap(map);
}
function Route() {
var start = new google.maps.LatLng(18.210885,-67.140884);
var end =new google.maps.latLng(18.211685,-67.141684);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
解决方案
It works for me if I:
- call the Route function
change:
var end =new google.maps.latLng(18.211685,-67.141684);
to:
var end =new google.maps.LatLng(18.211685,-67.141684);
(javascript is case sensitive, the browser reported the error in the javascript console)
code snippet:
var Center = new google.maps.LatLng(18.210885, -67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
center: Center,
zoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map"), properties);
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({
position: Center,
animation: google.maps.Animation.BOUNCE,
});
marker.setMap(map);
Route();
}
function Route() {
var start = new google.maps.LatLng(18.210885, -67.140884);
var end = new google.maps.LatLng(18.211685, -67.141684);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else {
alert("couldn't get directions:" + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
margin: 0;
padding: 0;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
这篇关于Google Maps v3在两点之间创建路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文