Javascript 如何使用jaredpalmer/presspack与谷歌地图集成构建主题？ 介绍问题

为了使用docker构建这个主题，我花了几天的时间试图将这对Google Maps实例插入到每个页面都会调用的元素中。地图不会加载，Chrome告诉我我的功能不存在

一些背景 Presspack为DB提供服务，并使用纱线营造环境。它将脚本分别用于一般用途和特定用途，因为它有一个common.js和一个.js，其中我对每个页面上应该加载的所有内容进行编码，而这个.js只在特定页面上加载。我现在正在使用common，因为我相信这个联系人部分将用于这个站点的每个页面和博客文章。此部分的调用函数是WP basic

我在functions.php中添加了一段代码，以便在页面页脚后加载API键脚本

值得一提的是，我已经在另一个纯HTML环境中尝试了common.js中使用的js代码

我的档案 common.js

 export default {
  init() {
    // JavaScript to be fired on all pages
    console.log('common');
  },
  finalize() {
  // JavaScript to be fired on all pages, after page specific JS is fired

    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

    if (isMobile) { // Tudo o que for pra navegadores mobile

    (...)


    } else { // Tudo o que for pra navegadores padrão

    (...)

    // GOOGLE MAPS LOAD
    var markers = [{
      GPS1: -15.7954901,
      GPS2: -47.8926766,
      client_address: "Corpus - Fisioterapia & Pilates, Unidade Asa Sul" 
    }];

    function initialize() {
      initMap();
      initMap2();
    };

    function initMap() {
      var latlng = new google.maps.LatLng(-15.7954901, -47.8926766); // default location
      var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.MAP,
        mapTypeControl: true
      };

      var map = new google.maps.Map(document.getElementById('mapaAsaSul'), myOptions);
      var infowindow = new google.maps.InfoWindow(),
        marker, lat, lng;

      for (i = 0; i < markers.length; i++) {
        lat = (markers[i].GPS1);
        lng = (markers[i].GPS2);
        name = (markers[i].client_address);

        marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          name: name,
          map: map
        });
        google.maps.event.addListener(marker, 'click', function(e) {
          infowindow.setContent(this.name);
          infowindow.open(map, this);
        }.bind(marker));
      }
    }
    var markers2 = [{
      GPS1: -15.7187167,
      GPS2: -47.8867326,
      client_address: "Corpus - Fisioterapia & Pilates, Unidade Lago norte"
    }];

    function initMap2() {
      var latlng = new google.maps.LatLng(-15.7187167, -47.8867326); // default location
      var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.MAP,
        mapTypeControl: true
      };

      var map = new google.maps.Map(document.getElementById('mapaLagoNorte'), myOptions);
      var infowindow = new google.maps.InfoWindow(),
        marker, lat, lng;

      for (i = 0; i < markers2.length; i++) {
        lat = (markers2[i].GPS1);
        lng = (markers2[i].GPS2);
        name = (markers2[i].client_address);

        marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          name: name,
          map: map
        });
        google.maps.event.addListener(marker, 'click', function(e) {
          infowindow.setContent(this.name);
          infowindow.open(map, this);
        }.bind(marker));
      }
    }


  },
};

import jQuery from 'jquery';
import './style.scss';

import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';

/**
 * Populate Router instance with DOM routes
 * @type {Router} routes - An instance of our router
 */
const routes = new Router({
  /** All pages */
  common,
  /** Home page */
  home
  /** About Us page, note the change from about-us to aboutUs. */
});

/** Load Events */
jQuery(document).ready(() => routes.loadEvents());

不良反应 它应该在各自的div的#mapaaasasul和#mapaLagoNorte中加载两个地图实例，但不会加载，Chrome的控制台会返回以下内容：

(index):1 
Uncaught (in promise) Xc {message: "initialize is not a function", name: "InvalidValueError", stack: "Error↵    at new Xc (http://maps.googleapis.com/ma…KEY&callback=initialize:125:107"}message: "initialize is not a function"name: "InvalidValueError"stack: "Error↵    at new Xc (http://maps.googleapis.com/maps/api/js?key=KEY&callback=initialize:56:227)↵    at Object._.Yc (http://maps.googleapis.com/maps/api/js?key=KEY&callback=initialize:56:337)↵    at Uh (http://maps.googleapis.com/maps/api/js?key=KEY&callback=initialize:125:221)↵    at http://maps.googleapis.com/maps/api/js?key=KEY&callback=initialize:125:107"__proto__: Error
Promise.then (async)
Vh @ js?key=KEY&callback=initialize:125
google.maps.Load @ js?key=KEY&callback=initialize:21
(anonymous) @ js?key=KEY&callback=initialize:212
(anonymous) @ js?key=KEY&callback=initialize:212

此初始化是用common.js编写的。该文件列在控制台中，由webpack（presspack使用）红色显示

我正在运行此@localhost，因此无法提供此页面的链接。 如果我在格式化这篇文章或提供错误信息时出错，我很抱歉。没有在堆栈中创建帖子的经验：(

任何关于这个问题的想法和想法都将受到欢迎

Edit:纠正了埃文在评论中建议的错误，该错误是调用

maps.google.com

而不是

maps.googleapis.com

Edit2:由于Evan一直在评论部分帮助我，我对代码做了如下补充

控制台中返回问题的回调函数已被删除，我将其替换为出现在common.js上的初始化函数的新回调

var markers = [{(...)}];

function initialize() {(...)};
function initMap() {(...)};

var markers = [{(...)}];
function initMap2() {(...)};

google.maps.event.addDomListener(window, 'load', initialize); //This is the new callback for my maps

这确实解决了一些问题，因为第一张地图出现了。不过，控制台仍会指向一些错误： “未捕获引用错误：初始化（common.js？a395:56）时未在initMap（common.js？a395:77）处定义i”，指向common.js:

的这一行（i=0；i

我没有理解它，只是猜测它与我的标记代码有关，因为在common.js中进行回调之后出现了第一个映射，但是没有标记

然后，Evan指出，如果

i

是全局初始化的，那么这个错误是有意义的。因此，他建议将代码更改为for

（让i=0；i

，这为我做到了。将它添加到代码中的两个标记实例中，可以使两个映射正确地显示并带有标记

---

感谢您的帮助，Evan！

首先，JavaScript API应该通过

https://maps.googleapis.com/

，而不是

http://maps.google.com/

“initialize is not a function”（初始化不是函数）作用域错误可以通过在页面加载时同步加载Maps API脚本来解决，例如使用

google.Maps.event.addDomListener（窗口，'load'，initialize）

，但通常推荐的方法是通过回调异步加载API：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initialize"></script>

然后，两个标记循环都存在问题，例如，

for（i=0；i

，因为它们缺少

i

初始化。请尝试使用

for（让i=0；i

---

您可以找到一个工作的jsbin，它显示了在上述代码更改后成功加载的地图和标记。

首先，应通过

https://maps.googleapis.com/

，而不是

http://maps.google.com/

“initialize is not a function”（初始化不是函数）作用域错误可以通过在页面加载时同步加载Maps API脚本来解决，例如使用

google.Maps.event.addDomListener（窗口，'load'，initialize）

，但通常推荐的方法是通过回调异步加载API：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initialize"></script>

然后，两个标记循环都存在问题，例如，

for（i=0；i

，因为它们缺少

i

初始化。请尝试使用

for（让i=0；i

---

您可以找到一个工作的jsbin，它显示了在上述代码更改后成功加载的映射和标记。

我将对此进行研究，但首先让我们排除一个脚本问题，即您应该使用

https://maps.googleapis.com/

非

http://maps.google.com/

。哦，我的错。我已经改变了。Th我从chrome得到的警告仍然存在，现在只指向

googleapis

。谢谢！很酷，但我认为同样的问题仍然存在，对吗？我在WP插件开发方面没有经验，但我猜这里可能发生的事是在JS运行回调函数之前调用了它，你能尝试在没有任何提示的情况下加载脚本吗回调？然后会出现什么错误（如果有）？请尽快删除上面的注释，因为您正在公共站点上包含自己的私有API密钥。至于现在没有收到任何控制台错误，问题是否已解决？或者根本没有调用初始化函数？（请注意，如果回调被删除，则必须在代码中的某个位置调用它，否则函数将永远不会运行）我将对此进行研究，但首先让我们排除一个脚本问题，即您应该使用

https://maps.googleapis.com/

非

http://maps.google.com/

。哦，我的错。我已经改变了。我从chrome上得到的警告仍然存在，现在只指向

googleapis

。谢谢！很酷，但我认为同样的问题仍然存在，