谷歌地图在手机上显示错误

Question

这是标记设计问题的后续问题。
maps displayed wrong on mobile (using JQuery mobile)
我是 javascript 和 jquery 的新手，无法将上述链接中对 Mark Design 问题的答案中提供的解决方案应用于我自己的谷歌地图脚本。 我正在做与 Mark Design 对这个文件所做的几乎相同的事情： http://skool411.info/m/Hawaii-2.html
在移动设备上，地图无法正确显示，并且执行与上面发布的 Mark Design 图片相同的操作。有人可以告诉我如何应用“pageshow”和“resize”吗？我还尝试关闭 ajax，但这对我不起作用： http://skool411.info/m/Hawaii-1.html
我很可能不知道如何正确地做到这一点。如果有人可以告诉我如何关闭 ajax，那也很棒。非常感谢您。

Answer 1

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);
        }
    });
}

Here是完整的代码。

希望这会有所帮助。