Google Map Initialize无法与Tab一起使用

拉吉尼坎斯

我正在尝试在标签点击事件上初始化Google Map,因为当前我正在像这样获取地图:

在此处输入图片说明

我的代码:

(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function render_map( $el ) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };

    // create map               
    var map = new google.maps.Map( $el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function(){

        add_marker( $(this), map );

    });

    // center map
    center_map( map );

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open( map, marker );

        });
    }

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map( map ) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

    });

    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/

$(document).ready(function(){

    $('.acf-map').each(function(){

        render_map( $(this) );

    });

});

})(jQuery);

我已经尝试过使用此代码,但是没有用:

$( ".map" ).click(function() {

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

});
普拉文
var map = new google.maps.Map( $el[0], args); //locally scoped in render_map($el)

1)地图变量未全局声明。

因此,当您尝试执行以下代码时,将遇到错误。

$( ".map" ).click(function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

尝试#1

尝试更改map为全局变量。

尝试#2

将其作为delegate事件处理程序,然后将以下代码添加到render_map( $el )方法中。

$(document).on('click', '.map', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Google Map Fitbounds无法与angularjs ng-dialog一起使用

来自分类Dev

如何将Google Map与聚合物一起使用?

来自分类Dev

将Google Map与Java Swing应用程序一起使用?

来自分类Dev

Google Map API可以与外部地图文件一起使用吗?

来自分类Dev

如何将Google Map与聚合物一起使用?

来自分类Dev

将Google Map与Java Swing应用程序一起使用?

来自分类Dev

使用Google Map v2无法显示Google Map

来自分类Dev

使用Google Map v2无法显示Google Map

来自分类Dev

Box-shadow使用Chrome在jQueryUI对话框中与Google Map一起留下痕迹

来自分类Dev

jQuery .load()无法与Google搜索结果一起使用

来自分类Dev

Google字体无法与引导程序一起使用

来自分类Dev

Flutter Google Maps和Firebase无法一起使用

来自分类Dev

Google字体无法与引导程序一起使用

来自分类Dev

Android Google Map无法加载

来自分类Dev

无法在Android的Google Map活动中显示Google Map

来自分类Dev

如何在iOS中随Google Map的移动一起移动标记?

来自分类Dev

如何将Google Map与定期移动的标记一起移动

来自分类Dev

麻烦-使用Google Map的Jquery

来自分类Dev

使用comgooglemaps的Google Map Direction

来自分类Dev

在Google Map中使用变量

来自分类Dev

无法使AngularJS Google Map居中/ AngularJS Google Maps API的使用

来自分类Dev

Physics.Raycast无法与Google Cardboard / Google VR一起使用

来自分类Dev

无法使用Google Map API JS在Intel XDK中查看Google Map

来自分类Dev

Android Google Map无法显示我的位置?

来自分类Dev

Android上的Google Map无法加载

来自分类Dev

Google Map Tilt无法正常工作

来自分类Dev

无法在FormView的Edittemplate中显示Google Map

来自分类Dev

无法在UIView中调整Google Map的大小

来自分类Dev

无法在片段内显示Google Map

Related 相关文章

  1. 1

    Google Map Fitbounds无法与angularjs ng-dialog一起使用

  2. 2

    如何将Google Map与聚合物一起使用?

  3. 3

    将Google Map与Java Swing应用程序一起使用?

  4. 4

    Google Map API可以与外部地图文件一起使用吗?

  5. 5

    如何将Google Map与聚合物一起使用?

  6. 6

    将Google Map与Java Swing应用程序一起使用?

  7. 7

    使用Google Map v2无法显示Google Map

  8. 8

    使用Google Map v2无法显示Google Map

  9. 9

    Box-shadow使用Chrome在jQueryUI对话框中与Google Map一起留下痕迹

  10. 10

    jQuery .load()无法与Google搜索结果一起使用

  11. 11

    Google字体无法与引导程序一起使用

  12. 12

    Flutter Google Maps和Firebase无法一起使用

  13. 13

    Google字体无法与引导程序一起使用

  14. 14

    Android Google Map无法加载

  15. 15

    无法在Android的Google Map活动中显示Google Map

  16. 16

    如何在iOS中随Google Map的移动一起移动标记?

  17. 17

    如何将Google Map与定期移动的标记一起移动

  18. 18

    麻烦-使用Google Map的Jquery

  19. 19

    使用comgooglemaps的Google Map Direction

  20. 20

    在Google Map中使用变量

  21. 21

    无法使AngularJS Google Map居中/ AngularJS Google Maps API的使用

  22. 22

    Physics.Raycast无法与Google Cardboard / Google VR一起使用

  23. 23

    无法使用Google Map API JS在Intel XDK中查看Google Map

  24. 24

    Android Google Map无法显示我的位置?

  25. 25

    Android上的Google Map无法加载

  26. 26

    Google Map Tilt无法正常工作

  27. 27

    无法在FormView的Edittemplate中显示Google Map

  28. 28

    无法在UIView中调整Google Map的大小

  29. 29

    无法在片段内显示Google Map

热门标签

归档