GoogleMaps 不会在页面加载时加载 [英] GoogleMaps does not load on page load

查看：29
本文介绍了GoogleMaps 不会在页面加载时加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法使用 GoogleMaps API V3 运行我的地图.地图不加载.我希望地图出现在 id 为 gisMap 的 div 中，但在 Chrome 调试器中我收到消息:

未捕获的 InvalidValueError: initMap 不是函数

Javascript

var map;函数 initMap() {//启用新的制图和主题google.maps.visualRefresh = true;//设置启动选项var mapOptions = {中心:新的 google.maps.LatLng(39.9078, 32.8252)，缩放:10，mapTypeId: google.maps.MapTypeId.ROADMAP};//获取 Map DOM 元素var mapElement = document.getElementById('gisMap');//使用 DOM 元素创建地图map = new google.maps.Map(mapElement, mapOptions);}

Bundle.js(摘录)

(...)module.exports = Vue;}).call(this,require('_process'))},{"_process":1}],3:[function(require,module,exports){'使用严格';无功地图；函数 initMap() {//启用新的制图和主题google.maps.visualRefresh = true;//设置启动选项var mapOptions = {中心:新的 google.maps.LatLng(39.9078, 32.8252)，缩放:10，mapTypeId: google.maps.MapTypeId.ROADMAP};//获取 Map DOM 元素var mapElement = document.getElementById('gisMap');//使用 DOM 元素创建地图map = new google.maps.Map(mapElement, mapOptions);}},{}],4:[function(require,module,exports){'使用严格';var Vue = require('vue');新的 Vue({});(...)

HTML

<html lang="zh-cn"><头><meta charset="UTF-8"><title>MFServer 测试</title><link rel="stylesheet" href="/css/app.css"><nav class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">MFDispo</a>

<div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Start</a></li><li><a href="#about">GIS</a></li></div><!--/.nav-collapse -->

</nav><body id="应用程序"><div class="pageWrapper"><div id="gisMap"></div><div id="内容"></div>

<script src="/js/bundle.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>< SCRIPT SRC = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 完整性=SHA256-KXn5puMvxCw + dAYznun + drMdG1IFl3agK0p/pqT9KAo = sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG + qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="匿名"></script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=initMap"异步延迟></script>

SCSS

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";@import "部分/表格";html，正文{高度:100%；填充顶部:25px；}.pageWrapper {背景颜色:红色；高度:100%；宽度:100%；}#gisMap {高度:100%；宽度:50%；背景颜色:绿色；}

解决方案

确保 initMap 函数在全局范围 或作为回调传递给 google 的参数可见maps.js 正确命名空间.在您的情况下，最快的解决方案是更换:

function initMap(){//..}

到:

window.initMap = function(){//...}

或命名空间版本:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap"异步延迟></script>

//

我看到在您的代码片段中您使用了一些异步模块加载(require.js?)，并且除非您调用包含此声明的模块，否则您在其中创建 window.initMap 函数的代码不会被执行.所以你没有满足我提到的第一个条件 - 在你调用 google maps.js 之前，initMap 必须在全局范围内可见.

I can't get my map running using the GoogleMaps API V3. The map does not load. I would expect the map to appear in the div with the id gisMap but in the Chrome Debugger I get the message: 

Uncaught InvalidValueError: initMap is not a function

Javascript

var map;

function initMap() {
    // Enabling new cartography and themes
    google.maps.visualRefresh = true;

    // Setting starting options
    var mapOptions = {
        center: new google.maps.LatLng(39.9078, 32.8252),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Getting Map DOM Element
    var mapElement = document.getElementById('gisMap');

    // Creating a map with DOM element
    map = new google.maps.Map(mapElement, mapOptions);
}

Bundle.js (excerpt)

(...)
module.exports = Vue;
}).call(this,require('_process'))
},{"_process":1}],3:[function(require,module,exports){
'use strict';

var map;

function initMap() {
    // Enabling new cartography and themes
    google.maps.visualRefresh = true;

    // Setting starting options
    var mapOptions = {
        center: new google.maps.LatLng(39.9078, 32.8252),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Getting Map DOM Element
    var mapElement = document.getElementById('gisMap');

    // Creating a map with DOM element
    map = new google.maps.Map(mapElement, mapOptions);
}

},{}],4:[function(require,module,exports){
'use strict';

var Vue = require('vue');

new Vue({});
(...)

HTML

<!doctype html>
<html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>MFServer Test</title>

    <link rel="stylesheet" href="/css/app.css">
</head>
    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MFDispo</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Start</a></li>
                <li><a href="#about">GIS</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

    <body id="app">
        <div class="pageWrapper">
            <div id="gisMap"></div>
            <div id="content"></div>
        </div>

        <script src="/js/bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=initMap" async defer></script>
    </body>

</html>

SCSS

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "partials/forms";

html, body {
  height: 100%;
  padding-top: 25px;
}

.pageWrapper {
  background-color: red;
  height:100%;
  width: 100%;
}

#gisMap {
  height: 100%;
  width: 50%;
  background-color: green;
}

解决方案

Make sure that initMap function is visible from the global scope or the parameter passed as callback to google maps.js is properly namespaced. In your case, the quickest solution will be replacing:

function initMap(){
//..
}

to:

window.initMap = function(){
//...
}

or namespace version:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap" async defer></script>

//Edit:

I see that in your code snippet you use some async module loading (require.js?) and the code in which you create window.initMap function does not get executed unless you call the module that contains this declaration. So you have not fulfilled the first condition that I've mentioned - the initMap must be visible from the global scope before you call google maps.js.

这篇关于GoogleMaps 不会在页面加载时加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆