我找到了很多解决方案,但对我的情况没有任何作用。我正在使用外部API而且我对JavaScript一无所知,但我的工作要求我让它工作。
这是我的整个代码。我不知道我做错了什么。地图甚至没有加载。
<!DOCTYPE html>
<html>
<head>
<title>Retkipaikka</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 650px;
width: 80%;
margin: 0 auto;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("map").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "https://kartta.retkipaikka.fi/places.json", true);
xhttp.send();
}
</script>
<div id="map"></div>
<script type="application/json">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(61, 25),
gestureHandling: 'cooperative',
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var styles = [ { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ce3940" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#6bb4d9" } ] }, { "featureType": "landscape.natural", "stylers": [ { "visibility": "on" }, { "invert_lightness": false }, { "color": "#fffff6" } ] } ]; map.setOptions({styles: styles});
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'http://kartta.retkipaikka.fi/places.json?north=61.0&south=59.0&west=24.0&east=25.0';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUo_SRhdUkf3OszSSX3CvckaNfwvhc070&callback=initMap">
</script>
</body>
</html>
&#13;