srcmini问题介绍
使用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 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));
}
}
}, };
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一直在评论部分为我提供帮助, 因此我对代码做了如下补充。
删除了在控制台中返回问题的回调函数, 我将其替换为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显示了上述代码更改后成功加载的地图和标记。
评论前必须登录！
注册