这是标记设计问题的后续问题。
地图在移动设备上显示错误(使用 JQuery 移动设备)
我是 javascript 和 jquery 的新手,无法将上面链接中的 Mark Design 问题答案中提供的解决方案应用于我自己的谷歌地图脚本。我正在做与 Mark Design 对这个文件所做的几乎相同的事情:http:
//skool411.info/m/Hawaii-2.html
在移动设备上,地图无法正确显示,并且执行与图片中显示的相同的事情上面发布的标记设计。有人可以告诉我如何应用“pageshow”和“resize”吗?我还尝试关闭 ajax,但这对我不起作用:
http ://skool411.info/m/Hawaii-1.html
我很可能不知道如何正确地做到这一点。如果有人可以告诉我如何关闭 ajax,那也很棒。非常感谢您提前。
问问题
166 次
1 回答
0
你有一些错误,calcRoute()
因为你没有directionsService
在这个上下文中。
首先,让我们放在map
“Loc1
全局”上下文中:
var map;
var Loc1;
使用建议问题的解决方案,需要在显示页面时创建地图:
$('#mapPage').live('pageshow',
function(event, ui) {
var mapOptions = {
zoom : 7,
mapTypeId : google.maps.MapTypeId.ROADMAP,
center : Loc1
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
});
初始化函数:
function initialize(Hlat1, Hlng1, Hlat2, Hlng2) {
Loc1 = new google.maps.LatLng(Hlat1, Hlng1);
var $content = $("#mapPage div:jqmData(role=content)");
$content.height(screen.height);
$.mobile.changePage($("#mapPage"));
calcRoute(Hlat1, Hlng1, Hlat2, Hlng2);
}
最后,计算路线:
function calcRoute(Hlat1, Hlng1, Hlat2, Hlng2) {
var rendererOptions = {
draggable : true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var request = {
origin : new google.maps.LatLng(Hlat1, Hlng1),
destination : new google.maps.LatLng(Hlat2, Hlng2),
travelMode : google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
}
});
}
这是完整的代码。
希望这可以帮助。
于 2012-10-04T21:48:08.753 回答