Question

目前，我有一个脚本可以在您点击“查看地图”链接时打开Google地图。这一切都在JQuery中完成。

我正在尝试重做它，以便在页面加载时立即打开地图。这不一定是无缝的，或像素完美的，但是如果弹出地图而不需要点击“查看地图”链接就是我们想要的。

以下是相关代码：

<script type="text/javascript">
/* <![CDATA[ */
    jQuery.noConflict();
    (function($) {

        $(function() {

            // Map global vars
            var map;
            var marker;
            var center;

            // initialize Google Maps API
            function initMap() {

                // Define Map center
                center = new google.maps.LatLng('<?php echo $lat; ?>','<?php echo $long; ?>');

                // Define Map options
                var myOptions = {
                  'zoom': 10,
                  'center': center,
                  'mapTypeId': google.maps.MapTypeId.ROADMAP
                };

                // Load Map
                map = new google.maps.Map(document.getElementById('job_map'), myOptions);

                // Marker
                marker = new google.maps.Marker({ position: center, map: map, title: "<?php echo $title; ?>" });

            }

            // Slide Toggle
            $('a.toggle_map').click(function(){
                $('#share_form').slideUp();
                $('#apply_form').slideUp();
                if (!map) initMap();
                $('#job_map').slideToggle(function(){
                    google.maps.event.trigger(map, 'resize');
                    map.setCenter(center);
                });
                $('a.apply_online').removeClass('active');
                $(this).toggleClass('active');
                return false;
            });

        });
    })(jQuery);
/* ]]> */

function actuateLink(link)
    {
       var allowDefaultAction = true;

       if (link.click)
       {
          link.click();
          return;
       }
       else if (document.createEvent)
       {
          var e = document.createEvent('MouseEvents');
          e.initEvent(
             'click'     // event type
             ,true      // can bubble?
             ,true      // cancelable?
          );
          allowDefaultAction = link.dispatchEvent(e);           
       }

       if (allowDefaultAction)       
       {
          var f = document.createElement('form');
          f.action = link.href;
          document.body.appendChild(f);
          f.submit();
       }
}
actuateLink(document.querySelectorAll('.toggle_map'));
</script>

你可以看到我在这里谈论的一个例子：http://www.psychiatryjobs.io/jobs/seattle-attending-psychiatrist/

正如您在我的代码中看到的那样，我尝试调用.click事件并使用我的代码模拟它，但在几个小时的工作后仍然没有成功。

提前致谢。

Answer 1

当您需要做的只是运行initMap函数时，尝试以编程方式单击链接以打开地图是很长的路要走。您可以在注册点击侦听器之前或之后添加对initMap的呼叫吗？

jQuery.noConflict();
(function($) {

    $(function() {

        // Map global vars
        var map;
        var marker;
        var center;

        // initialize Google Maps API
        function initMap() {

            // Define Map center
            center = new google.maps.LatLng('<?php echo $lat; ?>','<?php echo $long; ?>');

            // Define Map options
            var myOptions = {
              'zoom': 10,
              'center': center,
              'mapTypeId': google.maps.MapTypeId.ROADMAP
            };

            // Load Map
            map = new google.maps.Map(document.getElementById('job_map'), myOptions);

            // Marker
            marker = new google.maps.Marker({ position: center, map: map, title: "<?php echo $title; ?>" });

        }

        // Slide Toggle
        $('a.toggle_map').click(function(){
            $('#share_form').slideUp();
            $('#apply_form').slideUp();
            if (!map) initMap();
            $('#job_map').slideToggle(function(){
                google.maps.event.trigger(map, 'resize');
                map.setCenter(center);
            });
            $('a.apply_online').removeClass('active');
            $(this).toggleClass('active');
            return false;
        });

        //
        //show the map at start by default
        //
        if (!map) initMap();

    });
})(jQuery);

关于加载事件的Javascript / JQuery

1 个答案: