2

其他帖子中的“答案”都没有解决我的问题。请阅读我的帖子并尝试引导我朝着正确的方向前进

编辑 - 编辑 - 编辑

我已更新 java 脚本以包含推荐的功能

我在这里为那些不喜欢 jsfiddle 的人提供了 HTML

我在这里阅读了大量的问题和答案，但我无法让我的 Google 地图正确加载到调用它的 JQueryUI 选项卡中。

我知道必须先加载地图，但我无法让选项卡加载然后返回主页选项卡。我尝试了左偏技术，但无济于事。

我需要帮助。一套新的眼睛会非常有帮助。

任何帮助将不胜感激，因为我在这个项目上远远落后。

请查看下面引用的 jsfiddle，并告诉我哪里出错了。我已经筋疲力尽了，真的可以对此进行一些干预。你们中的一个 Java/jqueryui 大师肯定可以通过一个快速的小高峰看到我哪里出错了。

问题出在位置选项卡上

jsfiddle - http://jsfiddle.net/hughesjoseph/hNKPY/

测试站点http://l2technotes.dyndns.org

如果您转到地址/#tabs-4，则正确加载

完整的 Java 脚本

        (function (mapDemo, $, undefined) {
    mapDemo.Directions = (function () {
        function _Directions() {
            var map,
            directionsService, directionsDisplay,
            autoSrc, autoDest, pinA, pinB,

            markerA = new google.maps.MarkerImage('images/car.png'),
                markerB = new google.maps.MarkerImage('images/gmaplogo.png'),

            // Caching the Selectors
                $Selectors = {
                    mapCanvas: jQuery('#mapCanvas')[0],
                    dirPanel: jQuery('#directionsPanel'),
                    dirInputs: jQuery('.directionInputs'),
                    dirSrc: jQuery('#dirSource'),
                    dirDst: jQuery('#dirDestination'),
                    getDirBtn: jQuery('#getDirections'),
                    dirSteps: jQuery('#directionSteps'),
                    paneToggle: jQuery('#paneToggle'),
                    useGPSBtn: jQuery('#useGPS'),
                    paneResetBtn: jQuery('#paneReset')
                },

                autoCompleteSetup = function () {
                    autoSrc = new google.maps.places.Autocomplete($Selectors.dirSrc[0]);
                    autoDest = new google.maps.places.Autocomplete($Selectors.dirDst[0]);
                }, // autoCompleteSetup Ends

                directionsSetup = function () {
                    directionsService = new google.maps.DirectionsService();
                    directionsDisplay = new google.maps.DirectionsRenderer({
                        suppressMarkers: true
                    });

                    directionsDisplay.setPanel($Selectors.dirSteps[0]);
                }, // direstionsSetup Ends

                trafficSetup = function () {
                    // Creating a Custom Control and appending it to the map
                    var controlDiv = document.createElement('div'),
                        controlUI = document.createElement('div'),
                        trafficLayer = new google.maps.TrafficLayer();

                    jQuery(controlDiv).addClass('gmap-control-container').addClass('gmnoprint');
                    jQuery(controlUI).text('Traffic').addClass('gmap-control');
                    jQuery(controlDiv).append(controlUI);

                    // Traffic Btn Click Event
                    google.maps.event.addDomListener(controlUI, 'click', function () {
                        if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
                            jQuery(controlUI).addClass('gmap-control-active');
                            trafficLayer.setMap(map);
                        } else {
                            trafficLayer.setMap(null);
                            jQuery(controlUI).removeClass('gmap-control-active');
                        }
                    });
                    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
                }, // trafficSetup Ends

                mapSetup = function () {
                    map = new google.maps.Map($Selectors.mapCanvas, {
                        zoom: 16,
                        center: new google.maps.LatLng(32.565243, -97.130531),

                        mapTypeControl: true,
                        mapTypeControlOptions: {
                            style: google.maps.MapTypeControlStyle.DEFAULT,
                            position: google.maps.ControlPosition.TOP_RIGHT
                        },

                        panControl: true,
                        panControlOptions: {
                            position: google.maps.ControlPosition.RIGHT_TOP
                        },

                        zoomControl: true,
                        zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.LARGE,
                            position: google.maps.ControlPosition.RIGHT_TOP
                        },

                        scaleControl: true,
                        streetViewControl: true,
                        overviewMapControl: true,

                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var marker1 = new google.maps.Marker({
                        position: new google.maps.LatLng(32.565243, -97.130531),
                        map: map,
                        icon: markerB
                    });

                    autoCompleteSetup();
                    directionsSetup();
                    trafficSetup();
                }, // mapSetup Ends 

                directionsRender = function (source, destination) {
                    $Selectors.dirSteps.find('.msg').hide();
                    directionsDisplay.setMap(map);

                    var request = {
                        origin: source,
                        destination: destination,
                        provideRouteAlternatives: false,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };

                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {

                            directionsDisplay.setDirections(response);

                            var _route = response.routes[0].legs[0];

                            pinA = new google.maps.Marker({
                                position: _route.start_location,
                                map: map,
                                icon: markerA
                            });
                        }
                    });
                }, // directionsRender Ends

                fetchAddress = function (p) {
                    var Position = new google.maps.LatLng(p.coords.latitude, p.coords.longitude),
                        Locater = new google.maps.Geocoder();

                    Locater.geocode({
                        'latLng': Position
                    }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var _r = results[0];
                            $Selectors.dirSrc.val(_r.formatted_address);
                        }
                    });
                }, // fetchAddress Ends

                invokeEvents = function () {
                    // Get Directions
                    $Selectors.getDirBtn.on('click', function (e) {
                        e.preventDefault();
                        var src = $Selectors.dirSrc.val(),
                            dst = $Selectors.dirDst.val();

                        directionsRender(src, dst);
                    });

                    // Reset Btn
                    $Selectors.paneResetBtn.on('click', function (e) {
                        $Selectors.dirSteps.html('');
                        $Selectors.dirSrc.val('');
                        $Selectors.dirDst.val('');

                        if (pinA) pinA.setMap(null);
                        if (pinB) pinB.setMap(null);

                        directionsDisplay.setMap(null);
                    });

                    // Toggle Btn
                    $Selectors.paneToggle.toggle(function (e) {
                        $Selectors.dirPanel.animate({
                            'left': '-=305px'
                        });
                        jQuery(this).html('>');
                    }, function () {
                        $Selectors.dirPanel.animate({
                            'left': '+=305px'
                        });
                        jQuery(this).html('<');
                    });

                    // Use My Location / Geo Location Btn
                    $Selectors.useGPSBtn.on('click', function (e) {
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function (position) {
                                fetchAddress(position);
                            });
                        }
                    });
                }, //invokeEvents Ends 

                _init = function () {
                    mapSetup();
                    invokeEvents();
                }; // _init Ends

            this.init = function () {
                _init();
                return this; // Refers to: mapDemo.Directions
            };
            return this.init(); // Refers to: mapDemo.Directions.init()
        } // _Directions Ends
        return new _Directions(); // Creating a new object of _Directions rather than a function
    } ()); // mapDemo.Directions Ends
})(window.mapDemo = window.mapDemo || {}, jQuery);
var mapFirstClick = false;
$("#maptab").click(function () {
    mapFirstClick || setTimeout(function () {
        google.maps.event.trigger(map, 'resize');
        mapFirstClick = true;
        map.setCenter(32.565243, -97.130531);
    }, 250);
});
function PrintElem(elem) {
    Popup($(elem).html());
}
function Popup(data) {
    var mywindow = window.open('', 'my div', 'height=600,width=800');
    mywindow.document.write('<html><head><title>Driving Directions to Electrolysis by Bridgett</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');
    mywindow.print();
    mywindow.close();
    return true;
}
$(function () {
    $("#tabs").tabs();
});
$(function () {
    $("#accordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
});

相关的 HTML

<html>

    <head>
        <meta charset="utf-8">
        <title>Electrolysis by Bridgett</title>
        <!-- Favorite Icon -->
        <link rel="shortcut icon" href="images/beLogoColor3D.png" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>

    <body onload: "#maptab";>
        <div id="tabs">
            <ul style="border:3px solid green">
                <li class="myMenu"><a href="#tabs-4" onclick="maptab"><img height="20px" src="images/map.png" alt="" class="img center" /> Location</a>
                </li>
            </ul>
            <div id="tabs-4">
                <div class="myDirections" style="width:19%;">
                    <div>
                        <form>
                            <p>
                                <label class="mytxt">Driving From :</label>
                                <br />
                                <input type="text" value="" id="dirSource" style="width:98%;" />
                            </p>
                            <input type="hidden" value="1003 E. Broad St., 76063" id="dirDestination" />
                            <div class="mybutton"><a href="#getDirections" id="getDirections">Get Directions to<br />Electrolysis by Bridgett</a>
                            </div>
                            <center>
                                <input type="button" value="Print Directions" onclick="PrintElem('#directionSteps')" />
                            </center>
                        </form>
                    </div>
                    <div id="directionSteps">
                        <center>
                            <p class="msg">Step by Step Directions Appear Here</p>
                        </center>
                    </div>
                </div>
                <div class="myMap" style="width:78%;">
                    <div id="mapCanvas" style="width:100%;height:550px"></div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script>
                <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
    <script src="js/sample.js" type="text/javascript"></script>

</html>
4

1 回答 1

2

我也遇到过这个问题：

google.maps.event.trigger(map, 'resize');

触发此选项卡褪色时（250毫秒后默认）。这段代码对我有用：

        var mapFirstClick = false;
        $("#tabMap").click(function() {
            mapFirstClick || setTimeout(function() {
                google.maps.event.trigger(map, 'resize');
                mapFirstClick = true;
                map.setCenter(latLng);
            }, 250);
        });
于 2013-04-01T18:26:00.043 回答