Javascript 谷歌地图仅在我点击cmd+;班次+;R
我的谷歌地图代码出现了一个奇怪的错误 在本地,它工作得很好 然而,在live staging服务器上,当第一次查看页面时,我得到的initMap不是一个函数错误 棘手的部分是,如果我做一个硬刷新(cmd+shift+r),地图工作正常,没有错误 但是如果我再次尝试访问该页面(直接访问URL或单击指向该页面的链接),我会得到一个错误 它仅在使用cmd+shift+r刷新页面时正确显示地图 有人知道是什么导致了这一切吗?我的代码如下。多谢各位 以下是错误:Javascript 谷歌地图仅在我点击cmd+;班次+;R,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我的谷歌地图代码出现了一个奇怪的错误 在本地,它工作得很好 然而,在live staging服务器上,当第一次查看页面时,我得到的initMap不是一个函数错误 棘手的部分是,如果我做一个硬刷新(cmd+shift+r),地图工作正常,没有错误 但是如果我再次尝试访问该页面(直接访问URL或单击指向该页面的链接),我会得到一个错误 它仅在使用cmd+shift+r刷新页面时正确显示地图 有人知道是什么导致了这一切吗?我的代码如下。多谢各位 以下是错误: Uncaught Ib {message:
Uncaught Ib {message: "initMap is not a function", name:
"InvalidValueError", stack: "Error↵ at new Ib
(https://maps.googleapis.com/m…MY_KEY_j163:51"}
以下是我加载脚本标记的顺序:
\u foot.php:
<!-- jQuery -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Fancybox jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<!-- main js -->
<script defer type='text/javascript' src='<?= $config->urls->templates
. 'lib/main.js' ; ?>'></script>
<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=MY_KEY_HERE&callback=initMap"></script>
</body>
</html>
我通过自己调用initMap并从map脚本中删除回调来修复这个问题 因此,在main.js的末尾,我刚刚调用了initMap: main.js
// Initialize markers
let markers = [];
// Initialized map
let map;
// Initialize the infoWindow
let infoWindow;
// Initialize Soho
let soho;
// Initialize marker
let marker;
/**
* Lifestyle Google Map
*
*/
function initMap() {
/* The Sol Hollywood Location */
soho = {coords: { lat: 34.092786, lng: -118.31358620000003}, icon: 'http://maps.google.com/mapfiles/ms/icons/homegardenbusiness.png', title: 'Sol Hollywood'};
/* Create The Map */
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(soho.coords.lat, soho.coords.lng),
zoom: 12
});
/**
* Add New markers
* options object
*/
function addMarker(options) {
// Create the marker
marker = new google.maps.Marker({
position: options.coords,
map: map,
});
// Check if an icon has been passed into options, if so set it.
if (options.icon) {
marker.setIcon(options.icon);
}
// Create the info window
infoWindow = new google.maps.InfoWindow({
content: options.title
});
// When marker is clicked, set and show info window
marker.addListener('click', function() {
infoWindow.setContent(options.title);
infoWindow.open(map, this);
});
// Collect the markers
markers.push(marker);
}
// Add The Sol Hollywood Marker
addMarker(soho);
// Ajax get request to grab local spot coords for map.
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'json',
url: "/local-spot-get-coords",
success: function(data) {
// loop over the json coords from the PHP page and add a marker for each
for (let key in data) {
addMarker(data[key]);
}
}
});
}
window.initMap = initMap;
initMap();
在加载maps脚本的页脚中,我删除了回调:
\u foot.php
<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>