我正在尝试在 WordPress 网站上加载 google map js api,但我不断收到“initMap 不是函数”错误。我想我可能写错了我的代码,我从一个独立页面改编了它,所以也许将它应用到 WordPress 中会把事情搞砸。我遇到了 JS 文件未按正确顺序加载的问题,但现在我的 JS 在 Google map 之前加载,所以这不会是问题。肯定是initMap函数出了问题。这是导致错误的函数。我以为我已将其传递到全局范围,但我不确定我是否正确执行。
API key 调用
wp_enqueue_script( 'google-maps-js', 'https://maps.googleapis.com/maps/api/js?v=3&key=###key###&callback=initMap', array(), '20151215', true );
js文件中的函数
jQuery(function($) {
window.initMap = function() {
// Disallow drag on mobile
var isDraggable = $(document).width() > 480 ? true : false;
map = new google.maps.Map(document.getElementById('map'), {
scrollwheel: false,
draggable: isDraggable,
streetViewControl: false,
styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
});
// Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))
};
});
最佳答案
尝试将 initMap 函数移到 jquery init 之外
<script>
function initMap() {
// Disallow drag on mobile
var isDraggable = $(document).width() > 480 ? true : false;
map = new google.maps.Map(document.getElementById('map'), {
scrollwheel: false,
draggable: isDraggable,
streetViewControl: false,
styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
});
// Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))
};
</script>
关于全局范围内的 Javascript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39457726/