1

我想在多设备混合应用程序中集成一个谷歌地图，我按照这个例子：

以正确的方式在科尔多瓦加载谷歌地图

这可行，但开膛手模拟器没有向我显示地图。

Visual Studio 有一个“DOM 资源管理器”选项卡，我可以在 id=“map”的 div 中看到其他 div，我认为地图在里面。

html 和 .js 代码：

(function (global) {
    "use strict";

    //document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );
        
        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        loadMapsApi();
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
        loadMapsApi();
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
        loadMapsApi();
    };

    function loadMapsApi() {
        //if (navigator.connection.type === Connection.NONE || google.maps) {
        if (navigator.connection.type === Connection.NONE) {
            return;
        }
        $.getScript('http://maps.googleapis.com/maps/api/js?key=XX&sensor=true&callback=onMapsApiLoaded');
    }


    global.onMapsApiLoaded = function () {
        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"), {});
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    };

    document.addEventListener("deviceready", onDeviceReady, false);

} )(window);
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlankCordovaApp1</title>

    <!-- BlankCordovaApp1 references -->
    <link href="css/index.css" rel="stylesheet" />

</head>
<body>
    <p>Hello, your application is ready!</p>

    <div id="map" style="width:100%; height:100%"></div>

    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
    <script src="scripts/jquery-2.1.1.js"></script>

</body>
</html>

有人知道为什么模拟器不显示地图吗？

问候

4

2 回答 2

4

确保API_KEY使用您自己的 API 密钥替换地图 URL。否则谷歌将阻止地图的加载。

还要确保包含“连接”插件，否则navigator.connection将是未定义的。

我在这里的示例代码中也有一个错字：

    if (navigator.connection.type === Connection.NONE || google.maps) {

我在使用google.maps时没有先检查它是否google存在。更正的代码（也在我的博客文章中更正）将是：

    if (navigator.connection.type === Connection.NONE || (global.google !== undefined && global.google.maps)) {

最后，这是一个工作示例。

于 2014-10-29T00:55:09.047 回答
0

我想添加一个替代答案。你可以通过 bower 预下载脚本 ->

{
  "name": "app",
  "version": "0.0.0",
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "stomp-websocket": "~2.3.4",
    "sockjs-client": "~1.0.3",
    "google-maps": "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  }
}
于 2015-11-19T19:54:35.617 回答