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

我想在多设备混合应用程序中集成谷歌地图，我下面的例子是：

在Cordova加载谷歌地图的正确方式

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

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

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>

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

关于

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

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

最后，这里有一个工作示例。

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

相关内容

最新更新

热门标签：