Question

即时尝试在网站中绑定googlemap但如果我使用jquery则不会正确显示地图。

源代码如下：

<!DOCTYPE html> 
<html>
<head>
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

<!-- GoogleMaps !-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="./js/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    // Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
    var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
    $('#map_canvas').gmap({'center': yourStartLatLng});
  });
</script>
</head>

<body>
<div data-role="page" id="startseite">

  <div data-role="header" data-theme="a">
    <h1>Titel</h1>
  </div>

  <!--<div data-role="main" class="ui-content">!-->
  <div data-role="tabs" id="tabs" >
    <div data-role="navbar" data-iconpos="left">
      <ul>
          <li><a href="#one" data-ajax="false" class="ui-btn-active" data-icon="search">tab1</a></li>
          <li><a href="#two" data-ajax="false" data-icon="location">Karte</a></li>
      </ul>
    </div>
    <div id="one" class="ui-body-d ui-content">
      Page1
    </div>
    <div id="two" class="ui-body-d ui-content">
    <div style="width: 100%; height: 400px; position: relative" id="map_canvas"></div>
    </div>
  </div>
</div>
</body>
</html>

所以我遇到了这种错误： GoogleMap Error

我是GoogleMaps的新手，很抱歉，如果这是一个简单的问题，但我无法找到解决方案。

Answer 1

延迟地图的初始化，直到第一次显示带有地图的标签。

<script type="text/javascript">
$(function() {
    var map = null;

    $("#tabs").on("tabsactivate", function (event, ui) {
        if ((ui.newPanel.attr('id') == 'two') && !map) {
            var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
            map = $('#map_canvas').gmap({'center': yourStartLatLng});
        }
    });
});
</script>

jsfiddle

Answer 2

         $(window).bind("load", function() {
                ShowMap();
             });

只需将所有地图代码放入功能中，并在页面加载后调用它。这是因为加载时jquery页面延迟。这意味着地图在页面加载之前加载。

Answer 3

您需要在带有地图的标签变为可见后初始化Google地图。例如：

jQuery(document).ready(function (){
  $('[data-icon="location"]').parent().one('click', function (){ //click on tab link to open tab with map
        var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
        $('#map_canvas').gmap({'center': yourStartLatLng});
  });
});

带有谷歌地图的Jquery无法正确显示

3 个答案: