Ich versuche, Marker auf Standorten aus JSON-Datei. Ich benutze JQuery Promise, so dass Markierungen gesetzt werden, wenn beide Versprechen (Initiieren der Map und Abrufen der JSON-Datei) aufgelöst werden. Ich verwende Diese HTML-Seite mit der Karte:JQuery Promise + Google Karte Einstellung Marker für Standorte von JSON funktioniert nicht
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script type="text/javascript" src="js/markerclusterer_compiled.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap" async defer></script>
</head>
<body>
<div id="map"></div>
<script type="lodash/template" id="infowindow-template" >
<% items.forEach(function(item) { %>
<p><b><%-item.title%></b>, <%-item.author%></p>
<p><%-item.location%></p>
<p><a href="https://www.myminifactory.com/object/<%-item.url%>" target="_blank">Get more</a></p>
<% }); %>
</script>
</body>
app.js mit allen Funktionen:
var map;
var loadMapDeferred = $.Deferred();
var allSculptures;
var locations;
initMap = function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 30, lng: 0},
zoom: 3
});
loadMapDeferred.resolve();
}
var urlCDN = 'http://localhost/myproject/uploads/data.json';
var loadDataPromise = $.getJSON(urlCDN).then(function(data) {
allSculptures = data.sculptures;
locations = {};
for(var i=0; i<data.location.length; i++) {
locations[data.location[i].name] = data.location[i].location;
}
});
$.when(loadMapDeferred, loadDataPromise).then(function() {
var markers = _.map(locations, function(location, locationName) {
return createMarker(locationName, location);
});
var mcOptions = {gridSize: 25};
new MarkerClusterer(map, markers, mcOptions);
});
var currentInfoWindow;
function createMarker(locationName, location) {
var marker = new google.maps.Marker({
position: location
});
var infoWindow;
marker.addListener('click', function() {
if(currentInfoWindow)
currentInfoWindow.close();
if(infoWindow == null) {
infoWindow = new google.maps.InfoWindow({
content: getCityInfoWindow(locationName)
});
}
infoWindow.open(map, marker);
currentInfoWindow = infoWindow;
});
return marker;
}
data.json
{"sculptures":[{"title":"Bust of Caracalla","location":"Paris"},
{"title":"Brutus The Younger","location":"Paris"}],
"location":[{"name":"Beaux-Arts in Dijon, France","location":{"lat":47,"lng":5}},
{"name":"Louvre, Paris","location":{"lat":48,"lng":2}},
{"name":"St Pauls Cathedral, London","location":{"lat":51,"lng":-0}},
{"name":"V&A, London","location":{"lat":51,"lng":-0}}]}
Ich erhalte Karte, kann aber nicht siehe Markierungen. Was mache ich falsch?
hinzugefügt Karte, immer noch nicht funktioniert ( – bonbon
@bonbon ist die Funktion create tatsächlich aufgerufen wird "Was bekommen Sie, wenn Sie' console.log (location); 'innerhalb dieser Funktion? – duncan
ok, es gibt ein Problem, createMarker wird nicht einmal aufgerufen. Selbst getJSON wird nicht aufgerufen. Ich denke, das Problem ist da – bonbon