IBM Worklight 6.0 - 检索路线时无法加载Google地图

Question

我正在使用Google API v3来指示＃34;到这里的指示＆＃34;。但是，地图未正确加载。我在日志中没有错误。

页面加载时，我会执行以下操作：

var startPoint = new google.maps.LatLng(start.lat(), start.lng());
var endPoint = new google.maps.LatLng(parseFloat(end.latitude), parseFloat(end.longitude));
var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 15,
    mapTypeControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    center: endPoint
};

var map = new google.maps.Map(document.getElementById("branchLocatorSiteMapCanvas"), mapOptions);
$r.currentPage.map = map;

$page.off('pageshow').on('pageshow', function () {
    // Suitable for V3 and fix for map div is not rendered
    if ($r.currentPage.map) {
        var timer = window.setTimeout(function () {
            google.maps.event.trigger($r.currentPage.map, 'resize');
            if (endPoint) {
               $r.currentPage.map.setCenter(endPoint);
            }
            else if (startPoint) {
               $r.currentPage.map.setCenter(startPoint);
            }

            window.clearTimeout(timer);
        }, 400);
    }
});

if ($r.currentPage.map) {
    google.maps.event.addListenerOnce($r.currentPage.map, 'idle', function () {
        // Do something only the first time the map is loaded
        google.maps.event.trigger($r.currentPage.map, 'resize');
                  $r.currentPage.map.setCenter(endPoint);
    });

我将此片段用于Direction Service和Rendering。

var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

Answer 1

我没有尝试使用您的代码示例，但您可以使用这个更简单的演示项目来了解如何使其在基于Worklight 6.0.0.2的应用程序中运行：Google Maps Directions Demo project。

演示项目基于on this example通过Google地图文档。

最终结果是：

应用的JavaScript部分：

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var map;

function wlCommonInit(){
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var mapOptions = {
            zoom: 7,
            disableDefaultUI: false,
            center: chicago
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    directionsDisplay.setMap(map);

    calcRoute();
}

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}