Question

我目前在使用彩盒和谷歌地图时遇到困难。

我在彩盒内设置了谷歌地图，我正试图在谷歌地图中设置路线方向。

地图工作正常，但我无法启动它的功能说它未定义这是我目前的代码：

$(document).ready(function(e) {


    $(".fMap").colorbox({
        html:'<div id="map_canvas_all" style="width:900px; height:500px;"></div>'+
        '<form action="" id="routeForm">'+
        '<input type="text" id="routeStart" value="" placeholder="Woonplaats">'+
        '<input type="button" onclick="calcRoute();" value="Route plannen">'+
    '</form>'+
        '<div id="directionsPanel"></div>',
        scrolling:false,
        width:"1100px",
        height:"665px",
        onComplete:function(){ 
            loadScriptGeneral(); 

        }



    },
    function loadScriptGeneral() {
        var mapCanvas = document.getElementById('map_canvas_all');
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
            center: new google.maps.LatLng(51.811881, 4.601301),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas_all, mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));


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

    );

});

我还建立了一个JSFiddle http://jsfiddle.net/24X2s/

有人可以帮帮我吗？我非常感谢:)

Answer 1

将您的功能置于全局环境中：

function loadScriptGeneral() {
   // with stuff
}

function calcRoute() {
   // with stuff. i did an alert and it alerts
}

$(document).ready(function(e) {
     $(".fMap").colorbox({
        // all the stuff as is
     }); 
});

在彩色框中添加谷歌地图的功能

1 个答案:

Fiddle