我会用谷歌API地图在自定义网站temple上显示谷歌地图标记。我做的一切都像这篇帖子：Integrating PHP into Javascript to display map markers with Google API
但是控制台给了我一个错误，我不知道在哪里可以找到错误。
(index):774 Uncaught (in promise) ReferenceError: storeData is not defined
at initMap ((index):774)
at js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap:123
at js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap:123
我认为WordPress首先尝试使用wp\\u本地化，然后加载jquery。或者Wordpress不知道如何将jquery核心与jquery CDN连接起来。
我的海关寺庙网站代码：
<?php /* Template Name: Mapy */ ?>
<?php get_header(); ?>
<?php
$storeData = [];
$args = array( \'post_type\' => \'product\');
$loop = new WP_Query( $args );
foreach ($loop->posts as $post){
$storeData[] = [
\'title\' => apply_filters(\'the_title\', $post->post_title),
\'lat\' => get_field(\'gps_dlugosc\'),
\'long\' => get_field(\'szerokosc_gps\')
];
}
wp_localize_script(\'jquery-core\', \'storeData\', $storeData);
?>
<section style="padding-top:70px;">
<div id="map"></div>
</section>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var poznan = {lat: 52.402684, lng: 16.9213905};
var j = storeData.length;
//console.log(storeData.length);
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById(\'map\'), {
zoom: 15,
center: poznan,
zoomControl: true,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true,
}
);
for (var i=0; i<5; i++) {
var marker=new google.maps.Marker({
position: new google.maps.LatLng({lat: storeData[i].lat, lng: storeData[i].long}),
map: map,
title: storeData[i].title
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAg-GBNbwLWCxiN-UI-0COkr1bgAKpXjQU&callback=initMap"></script>
<?php get_footer(); ?>
谢谢你的帮助，对不起，我英语不好。
SO网友:Krzysiek Dróżdż
好的，所以在您的代码中很少有误解。。。
1。您应该本地化自己的脚本，而不是一些内置脚本
您无法确定该站点将使用哪些脚本。在您的情况下，您可以本地化
jquery-core 脚本，但您不能确保此脚本已在站点上排队。
这意味着您的本地化变量可能不会包含在页面中（并且不在您的情况中）。
2。您应该在打印脚本之前对其进行本地化
您的代码直接在模板中本地化脚本。如果你在函数内部这样做会更好。php。
但还有一个更大的问题-在调用get_header(). 这意味着脚本可能已经打印出来了，因此无法本地化。。。
那么如何解决这个问题呢
1. Move your JS code:
function initMap() {
...
}
到一些外部文件，如
my-map-script.js.
2. Enqueue and localize it properly
function my_enqueue_map_scripts() {
if ( is_page(123) ) { // you can enqueue it only for given page, just delete this if, if it should be available globally
wp_enqueue_script( \'my-map-script\', get_template_directory_uri() . \'/js/ma-map-script.js\', array(), \'1.0.0\', true );
$storeData = [];
$args = array( \'post_type\' => \'product\');
$loop = new WP_Query( $args );
foreach ($loop->posts as $post){
$storeData[] = [
\'title\' => apply_filters(\'the_title\', $post->post_title),
\'lat\' => get_field(\'gps_dlugosc\'),
\'long\' => get_field(\'szerokosc_gps\')
];
}
wp_localize_script(\'my-map-script\', \'storeData\', $storeData);
}
}
add_action( \'wp_enqueue_scripts\', \'my_enqueue_map_scripts\' );
