Question

这是我第一次使用jQuery和Google Maps。因此，我实际上复制并粘贴了google maps hello world页面并包含jQuery Mobile，我只是得到一个空页面说“正在加载”。我准备好了，不知道为什么？

HTML和JS：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mystyles.css">
    <link rel="stylesheet" href="css/jquery.mobile.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/>

    <script type="text/javascript" 
      src="https://maps.googleapis.com/maps/api/js?key=[key]&sensor=true">
    </script>

    <script type="text/javascript"  src="js/myscript.js"></script>
    <script type="text/javascript"  src="js/cordova-2.3.0.js"></script>

    <script type="text/javascript">
          function initialize()
          {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
          }
    </script>


  </head>
  <body onload="initialize()">
      <div id="map-canvas"></div>
  </body>
</html>

在哪里说MYAPIKEY我把钥匙放在那里。我不确定这些是如何分崩离析的？

更新

将代码更改为上方。当我删除指向我的jQuery Mobile文件的链接时，一切都很好......

Answer 1

检查this working demo

google.maps.event.addDomListener（window，'load'，initialize）;这不是必需的。在这里，您可以在窗口加载事件上添加一个监听器，并告诉它调用initialize。但是，您不提供任何初始化函数。在任何情况下，您已经使用jqm。
您没有为容器提供高度。虽然您的容器的父容器宽度会有宽度，但它不会有任何高度。因此，即使地图正确加载，它也不会出现。
在包含它们之前，您尝试使用jquery和jquery mobile。首先包括然后使用。

Answer 2

我建议使用 pageshow 事件而不是 pageinit ，因为后期在页面生命周期中为时尚早

$(document).on('pageshow', ...);

还要避免在地图画布中使用自闭标签

<div id="map-canvas"></div>

谷歌地图和Jquery Mobile没有合作

2 个答案: