如何使用具有Google Maps集成的jaredpalmer/presspack构建主题（） _GoogleMaps

问题介绍使用docker的jaredpalmer / presspack构建这个主题, 我努力了几天, 因为我试图将这对Google Maps实例插入一个将在每个页面中调用的元素中。地图不会加载, Chrome告诉我我的功能不存在。
一些背景Presspack为DB提供服务, 并使用纱线制造环境。它将脚本分别用于一般用途和特定用途, 因为它具有common.js(我在其中编写应在每个页面上加载的所有内容)和.js(仅在特定页面上加载)的代码。我现在正在共同工作, 因为我相信此联系部分将在本网站的每个页面和博客文章中使用。本节的调用函数是WP basic < ？php get_template_part(‘ content’ , ‘ contato-std’ ); ？>
我在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 firedvar 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)); } }}, };

function.php

< ?php ... function add_google_maps() {wp_enqueue_script( 'my-google-maps', 'http://maps.googleapis.com/maps/api/js?key=KEY& callback=initialize', NULL, NULL, true ); add_filter( 'script_loader_tag', function ( $tag, $handle ) {if ( 'my-google-maps' !== $handle ) return $tag; return str_replace( ' src', ' async defer src', $tag ); }, 10, 2 ); } add_action('wp_enqueue_scripts', 'add_google_maps'); ?>

处理来自common.js和.js的路由的JS是index.js

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的#mapaAsaSul和#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, 因此无法提供此页面的链接。很抱歉, 如果我在设置此帖子的格式时遇到任何错误或提供了错误的信息。没有真正在堆栈中创建帖子的经验。 ??
关于这个问题的任何想法都将受到欢迎。
编辑：更正了该错误, 如Evan在评论中建议的那样, 该调用是针对maps.google.com而不是maps.googleapis.com
Edit2：由于Evan一直在评论部分为我提供帮助, 因此我对代码做了如下补充。
【如何使用具有Google Maps集成的jaredpalmer/presspack构建主题（）】删除了在控制台中返回问题的回调函数, 我将其替换为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

自从第一张地图出现以来, 这确实解决了一些问题。仍然, 控制台仍会指出一些错误：” 未捕获的ReferenceError：在初始化(common.js？a395：56)的initMap(common.js？a395：77)上未定义我” .js：for(i = 0; i < markers.length; i ++){。
我没听懂只是猜测它与我的标记代码有关, 因为第一个地图是在common.js中进行回调后出现的, 但没有标记。
然后, 埃文指出, 如果我是全局初始化的, 那么该错误就很有意义。因此, 他建议将代码更改为for(让i = 0； i < markers.length; i ++){, 这对我来说是有效的。将其添加到代码中的两个标记实例中, 可以使两个地图正确显示并带有标记。
谢谢你的帮助, 埃文！
#1首先, 应通过https://maps.googleapis.com/而不是http://maps.google.com/调用JavaScript API。
可以通过在页面加载时同步加载Maps API脚本来解决” 初始化不是函数” 范围错误, 例如通过使用google.maps.event.addDomListener(window, ‘ load’ , initialize), 但通常建议的方法是通过回调异步加载API：

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

然后两个标记循环都有问题, 例如for(i = 0; i < markers.length; i ++), 因为它们缺少i初始化。尝试使用for(让i = 0； i < markers.length; i ++)。
你可以在此处找到一个有效的jsbin, 该jsbin显示了上述代码更改后成功加载的地图和标记。