Question

对于学校项目，我要做一个PhoneGap应用程序。我想用地图做一个div，并在获得兴趣点之后。但它不可能在我的Android模拟器中，得到错误“referenceError无法找到变量谷歌”。我尝试了很多我找到的解决方案，我唯一可以做的就是在我的应用程序顶部显示一小块地图，但只能在互联网浏览器上显示。

<!DOCTYPE HTML>  
<html>  
<head>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />

<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>

<style type="text/css">
    #footer {
        position:fixed;
        bottom:0;
        left:0;
        right:0;
    }

    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map-canvas { height: 100% }

</style> 


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


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

</head>

<body>

如果有人在他的计算机上运行一段代码，或者发现我的错误，我会非常高兴。感谢。

Answer 1

以下适用于我的Nexus 4仿真器。主要来自Google Maps JavaScript API：

<!DOCTYPE HTML>
<html>
    <head>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script scr="jquery.js></script>
        <link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
        <script type="text/javascript" src="cordova-2.4.0.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>

    <style type="text/css">
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }

    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

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

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

PhoneGap和谷歌地图

1 个答案: