[英]Google Maps API Intel XDK Waypoints
For a school project I have to make an app, using Intel XDK, jQuery Mobile and an API. 对于学校项目,我必须使用Intel XDK,jQuery Mobile和API制作一个应用程序。 I wanted to make an app in which you can make a route and display this route on a google-maps-map (like a travelapp to view your trips). 我想开发一个应用程序,您可以在其中创建路线并将该路线显示在google-maps地图上(例如用于查看行程的travelapp)。
I used Intel XDK (HTML5 + Cordova and the App Designer) and got an API key from the Google Maps Javascript API. 我使用了Intel XDK(HTML5 + Cordova和App Designer),并从Google Maps Javascript API获得了API密钥。
Right now, I have used the Google Maps API and displaying a route from A to B went well. 现在,我已经使用了Google Maps API,并且显示了从A到B的路线。 In the following code (this is in my script) I tried to add waypoints to my route. 在以下代码中(这是在我的脚本中),我尝试将航路点添加到我的路线中。 In my HTML code I have three text-inputs for the user (start, via (=waypoint), end), the map and a button to show the route. 在我的HTML代码中,我为用户提供了三个文本输入(开始,通过(= waypoint),结束),地图和用于显示路线的按钮。 I have looked at many sample codes, but my code doesn't work and I don't know why. 我看过许多示例代码,但是我的代码不起作用,我也不知道为什么。 There is no error, but if you push the showbutton, nothing happens. 没有错误,但是如果按下showbutton,则什么也不会发生。 What have I done wrong or what did I miss? 我做错了什么或错过了什么?
I hope anyone can help and thanks in advance! 希望任何人都可以提供帮助并提前致谢!
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initMap() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
// set direction render options
//var rendererOptions = { draggable: true };
directionsDisplay = new google.maps.DirectionsRenderer({map: map});
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// add the map to the map placeholder
var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = $('#start-input').val();
var via = $('#via-input').val();
var end = $('#end-input').val();
var waypts = [];
waypts.push({
location: via,
stopover: true
});
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
unitSystem: google.maps.UnitSystem.IMPERIAL,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert('Directions request failed due to ' + status);
}
});
}
function createMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
/* button #show-btn */
$(document).on("click", "#show-btn", function(evt) {
initMap();
createMarker(start);
createMarker(via);
createMarker(end);
return false;
});
You're creating the variables start
, via
and end
as local variables in your calcRoute
function, meaning they're not available to any code outside of that function. 您正在calcRoute
函数中将变量start
, via
和end
创建为局部变量,这意味着该函数之外的任何代码均无法使用它们。 So when you try and refer to them in these lines, they'll be undefined, and I suspect you're getting a JS error: 因此,当您尝试在这些行中引用它们时,它们将是未定义的,并且我怀疑您会遇到JS错误:
createMarker(start);
createMarker(via);
createMarker(end);
Make them global variables instead; 使它们成为全局变量; define them at the same time as you do this: 在执行此操作的同时定义它们:
var directionDisplay;
ie that becomes: 即变成:
var directionDisplay, start, via, end;
And then remove the var
keyword from where you refer to them in the calcRoute
function, ie do: 然后在calcRoute
函数中从引用它们的位置删除var
关键字,即:
function calcRoute() {
start = $('#start-input').val();
via = $('#via-input').val();
end = $('#end-input').val();
You also have the same problem with your map
variable. 您的map
变量也有同样的问题。 You create that as a local variable in your initMap
function, and then try and refer to it in the createMarker
function, which won't have access to it. 您可以在initMap
函数中将其创建为局部变量,然后尝试在无法访问它的createMarker
函数中对其进行引用。 Make that a global variable too. 也使它成为全局变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.