让我们首先从google地图代码开始:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.4357808, 4.991315699999973),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
var seg = {
1: 'invesCastProd',
2: 'forged',
3: 'airframe',
5: 'corp',
6: 'structurals'
}
var comp = {
1: 'structurals',
2: 'airfoils',
3: 'airfoils',
4: 'wyman',
5: 'energy',
6: 'strucComp',
7: 'mechHard',
8: 'engineProd',
9: 'corp',
10: 'aero',
12: 'timet',
13: 'specMetals'
}
var myJSON = {};
var myMarkers=[];
$.getJSON("/pcc-common/static/pcc-locations.json", function(json1) {
myJSON=json1;
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.latitude, data.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng
});
myMarkers[key]=marker;
marker.setMap(map);
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) {infoWindow.close();}
infoWindow = new google.maps.InfoWindow({
content: "<h5>" + data.display_name + "</h5>" +
"<div>" + data.street+ "</div>" +
"<div>" + data.city + ", " + data.state + " " + data.postal_code + "</div>" +
"<div class='mapPhoneNum'>" + data.telephone + "</div>" +
"<a href=" + data.web_url + ">Website</a>"
});
infoWindow.open(map, marker);
map.setZoom(15);
map.panTo(this.getPosition());
google.maps.event.addListener(infoWindow,'closeclick',function(){
resetMapOrigin();
});
});
filterMarkers = function(category){
var component = category.data("component_id");
var segment = category.data("segment_id")
setMapOnAll(null);
resetMapOrigin();
var filteredMarkers=[];
$.each(myJSON, function(key, data) {
if( typeof(component)!="undefined" ){
if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){
filteredMarkers.push(key);
}
}else{
if( myJSON[key].segment_id == segment ){
filteredMarkers.push(key);
}
}
});
for(i=0;i<filteredMarkers.length;i++){
myMarkers[filteredMarkers[i]].setMap(map);
}
}
function setMapOnAll(map) {
for (var i = 0; i < myMarkers.length; i++) {
myMarkers[i].setMap(map);
}
}
function resetMapOrigin(){
map.setZoom(2);
map.setCenter({lat:52.4357808,lng:4.991315699999973});
}
});
});下面是html中的初始化脚本:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAMNhLC5984PO876GF8nesnOqbiKkblvuBo&callback=initialize" async defer></script>所以发生的事情是,有时你打开网站,它会很好地加载所有的引脚。你点击刷新,它会再次加载所有的引脚。单击刷新,它将再次加载。再次单击刷新,将抛出错误Uncaught ReferenceError: google is not defined(...)。并且您可以多次刷新,但它仍然会抛出错误。然后,突然间,在刷新点击它将加载所有引脚没有错误。所以基本上有时候它是有效的,而有时候它会给我一个错误。
我不知道发生了什么,也不知道它为什么要这么做。
它出错的那一行是var latLng = new google.maps.LatLng(data.latitude, data.longitude); (显然因为这是第一个"google“调用)。
谁能告诉我为什么它会这样做?
顺便说一句,这是在一个开发服务器上,所以它不是在线的。但是,它有时会起作用,有时会给我一个错误。
谢谢你的帮助!
发布于 2016-12-13 08:00:33
所有使用Google Maps SDK的代码都需要在initialize函数中执行。在您的示例中,您的JSON可以在Google Maps之前加载,这就是为什么有时会出现错误的原因。
一种解决方案是将$.getJSON的回调移动到一个单独的函数,然后在映射初始化后触发请求。
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.4357808, 4.991315699999973),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Fetch locations from the server
$.getJSON("/pcc-common/static/pcc-locations.json", onLocationsFetched)
}
function onLocationsFetched(json) {
myJSON=json1;
$.each(json1, function(key, data) {
...https://stackoverflow.com/questions/41111532
复制相似问题