我想在同一网站上使用三张地图,一张在两页上,另一张在另一页上。我可以使一个页面正常工作,而不能让另一个页面正常工作,它往往是我选择在window.onload函数中执行的第一个页面。所以我知道我的代码中没有问题,因为我可以让它们全部同时工作,而不能同时工作。我唯一能想到的是,也许是因为我在每个页面上使用了相同的API密钥?如果是这样,我如何获得一个单独的钥匙?这是我的代码:

///////////////////////////////////////////////////////////// Google Maps
function scaligeroMap() {
var scaligeroLocation = new google.maps.LatLng(45.766281, 10.8088879);

var mapOptions = {
  'center' : scaligeroLocation,
  'zoom' : 17,
};

var map = new google.maps.Map(document.getElementById('scaligeroMap'), mapOptions);
var marker = new google.maps.Marker({
        'position' : scaligeroLocation,
        'map' : map,
        'title' : 'Castello Scaligero'
    });

//////////////////////////////////////////////Pop up containing address when marker is clicked
var popupContent = 'Castello Malcesine:<br>';
popupContent += 'Via Castello Scaligero, 39<br>';
popupContent += '37018 Malcesine Verona<br>';
popupContent += 'Italy';

var infowindow = new google.maps.InfoWindow({
  content: popupContent,
  maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

}

function alCorsaroMap() {
var alCorsaroLocation = new google.maps.LatLng(45.7658856, 10.8099179);

var mapOptions = {
  'center' : alCorsaroLocation,
  'zoom' : 17,
};

var map = new google.maps.Map(document.getElementById('alCorsaroMap'), mapOptions);
var marker = new google.maps.Marker({
        'position' : alCorsaroLocation,
        'map' : map,
        'title' : 'Al Corsaro'
    });

//////////////////////////////////////////////Pop up containing address when marker is clicked
var popupContent = 'Ristorante Al Corsaro:<br>';
popupContent += 'Via Paina, 17<br>';
popupContent += '37018 Malcesine Verona<br>';
popupContent += 'Italy';

var infowindow = new google.maps.InfoWindow({
  content: popupContent,
  maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

}

function oasiMap() {
var oasiLocation = new google.maps.LatLng(45.80406, 10.842993);

var mapOptions = {
  'center' : oasiLocation,
  'zoom' : 17,
};

var map = new google.maps.Map(document.getElementById('oasiMap'), mapOptions);
var marker = new google.maps.Marker({
        'position' : oasiLocation,
        'map' : map,
        'title' : 'Oasi Bar'
    });

//////////////////////////////////////////////Pop up containing address when marker is clicked
var popupContent = 'Hotel Oasi Beach:<br>';
popupContent += 'Via Gardesana, 510<br>';
popupContent += '37018 Malcesine Verona<br>';
popupContent += 'Italy';

var infowindow = new google.maps.InfoWindow({
  content: popupContent,
  maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

}


window.onload = function() {
scaligeroMap();
alCorsaroMap();
oasiMap();
};


因此,使用此代码scaligeroMap();显示在使用它的页面上,但alCorsaroMap();和oasiMap();不在单独页面上显示。如果我把scaligeroMap();在底部,以便最后执行两个alCorsaroMap();。 &oasiMap();将工作,但scaligeroMap();惯于。如何使它们全部显示?

最佳答案

您需要先检查map元素是否存在,然后再尝试在该页面上不存在的元素上运行代码。

您可以在window.onload函数上执行此操作:

var scaligeroMapElement =  document.getElementById('scaligeroMap');
if (typeof(scaligeroMapElement) != 'undefined' && scaligeroMapElement != null)
{
    scaligeroMap();
}

var alCorsaroMapElement =  document.getElementById('alCorsaroMap');
if (typeof(alCorsaroMapElement) != 'undefined' && alCorsaroMapElement != null)
{
    alCorsaroMap();
}

var oasiMapElement =  document.getElementById('oasiMap');
if (typeof(oasiMapElement) != 'undefined' && oasiMapElement != null)
{
    oasiMap();
}


假设每个地图都有不同的ID。

如果您包含jQuery,则可以执行以下操作:

if ($('#alCorsaroMap').length > 0) {
    oasiMap();
}

关于javascript - 是否可以在同一网站的多个页面上使用Google Maps API?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26166371/

10-12 12:45
查看更多