Javascript Can';我不能让这个谷歌地图工作
页面上显示的唯一内容是米色背景、平移箭头和放大/缩小栏,但没有其他内容Javascript Can';我不能让这个谷歌地图工作,javascript,xml,google-maps,google-maps-api-3,Javascript,Xml,Google Maps,Google Maps Api 3,页面上显示的唯一内容是米色背景、平移箭头和放大/缩小栏,但没有其他内容 <!DOCTYPE html> <html> <head> <style type="text/css"> html, body, #map-canvas { height: 100%; margin: 0; padding: 0; } </style>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3lKBNm9jCGbUP8SH9j96S6AmUIRA2dPk">
</script>
<script type = "text/javascript" >
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://website.com/bustime/api/v1/getstops?key=555555&rt=CS&dir=Circ",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var latitude = xmlDoc.getElementsByTagName("lat")[0].childNodes[0].nodeValue;
var longitude = xmlDoc.getElementsByTagName("lon")[0].childNodes[0].nodeValue;
function initialize(latitude, longitude) {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', function () {
initialize(latitude, longitude);
});
</script>
</head>
<body onLoad ="initialize(longitude, latitude)">
<div id="map-canvas"></div>
</body>
</html>
您正在尝试获取一个文件:
xmlhttp.open(“GET”http://website.com/bustime/api/v1/getstops?key=555555&rt=CS&dir=Circ“,假)代码>
由于响应http errore301被永久移动
我相信您的问题在于您正在初始化映射两次。使用google.maps.event.adddomstener
并使用body的onLoad=“初始化(经度、纬度)”
<>基本上,你的地图加载到空白层下面,没有正确加载。
为避免竞争条件,建议使用google.maps.event.adddomstener
。。。当我删除onLoad=“initialize(longitude,latitude)”
时,它对我有效。这可能是因为您尝试加载的网站提供了404,因此无法填充lat和long?我必须删除链接,因为它包含api键:这是使用您提供的新链接,当我将它保存到本地“test.xml”并使用它时,它似乎对我有用。当我将其直接用于ajax时,会出现CORS错误。你有CORS错误吗?你能在google chrome中打开它,并用“Ctrl+Shift+J”打开开发者控制台,检查控制台选项卡是否有任何指定的错误吗?对我来说,如果我删除onLoad,我会得到一个空白的白色页面。
<bustime-response>
<stop>
<stpid>305</stpid>
<stpnm>12TH</stpnm>
<lat>33.996838209471</lat>
<lon>-56.008665</lon>
</stop>
</bustime-response>
xmlhttp.open("GET","http://trip.osu.edu/bustime/api/v1/getstops?key=Uw7ayuTAmaPDWnECG3khBLYd2&rt=CLS&dir=Circular",true);