Question

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

Loading Google Maps in Cordova the Right Way

这样可行，但开膛手模拟器不会显示地图。

Visual Studio有一个＆＃34; DOM浏览器＆＃34;选项卡，我可以看到div中的其他div与id =“map”，我认为地图在里面。

html和.js代码：

＆＃13;

(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);

＆＃13;

<!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>

＆＃13;

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

问候

Answer 1

确保使用您自己的API密钥替换地图网址中的API_KEY。否则Google将阻止加载地图。

还要确保包含＆＃34;连接＆＃34;插件，否则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)) {

最后，here is a working example。

Answer 2

我想添加一个替代答案。您可以通过bower预先下载脚本 - ＆gt;

{
  "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"
  }
}

多设备混合应用程序 - 谷歌地图

2 个答案: