多设备混合应用 - 谷歌地图答案

【问题标题】：Multi-Device Hybrid Apps - Google Map多设备混合应用 - 谷歌地图
【发布时间】：2015-11-20 03:54:35
【问题描述】：

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

Loading Google Maps in Cordova the Right Way

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

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>

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

问候

【问题讨论】：

请发布您的代码。您的 map 元素是否设置了任何高度？它可能只有 0px 高。尝试在 CSS 中给它一个height？
我实现了这个例子Bing Maps in a hybrid app工作完美我可以看到Bing Map，为什么我能看到Bing Map，但看不到Google Map？

标签： multi-device-hybrid-apps

【解决方案1】：

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

还要确保包含“连接”插件，否则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。

【讨论】：

如果有人遇到，在 Cordova，我还想补充一点，以确保使用了正确的 Google 地图 API 链接，并且在 Cordova 的白名单链接中。当我加载的网址在 http 上时，我得到了它，而白名单的网址在 https
Connection.NONE 来自哪里？在我的模拟器中它会抛出错误Connection is not defined

【解决方案2】：

我想添加一个替代答案。你可以通过 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"
  }
}

【讨论】：

我正在尝试使用 Ionic 进行此操作，但当我尝试加载谷歌地图时仍然出现加载错误。