Ich habe viele andere Beiträge hier auf StackOverflow und in der Google-Suche gelesen, und ich kann immer noch nicht richtig funktionieren. Ich denke, es hat etwas mit meiner For-Schleife zu tun. Ich habe bereits ein Mouseover-Ereignis für die Infofenster festgelegt, aber ich möchte, dass die Karte auf eine Markierung zoomt, wenn Sie darauf klicken und sie in der Karte zentrieren. Ich habe versucht:Google Maps Vergrößern Sie den Marker mit einem Klick mehrere Marker
google.maps.event.addListener(marker,'click',function(e) {
map.setZoom(9);
map.setCenter(e.latLng);
});
Die hat am besten funktioniert, aber immer noch nicht immer auf den Marker zentrieren, vor allem nach mehreren Klicks. Manchmal ist der Marker nicht sichtbar.
// add the double-click event listener
google.maps.event.addListener(marker, 'dblclick', function(event){
map = marker.getMap();
map.setCenter(overlay.getPosition()); // set map center to marker position
smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
})
// the smooth zoom function
function smoothZoom (map, max, cnt) {
if (cnt >= max) {
return;
}
else {
y = google.maps.event.addListener(map, 'zoom_changed', function(event){
google.maps.event.removeListener(y);
self.smoothZoom(map, max, cnt + 1);
});
setTimeout(function(){map.setZoom(cnt)}, 80);
}
}
Weil es wohl haben glatten Zoom: Die
Der Code-Schnipsel, die ich wirklich verwenden wollte. Allerdings kann ich diesen hier kaum zur Arbeit bringen. Die meisten Klicks auf die Marker gehen nach Long Island NY oder nirgends.
Mein Code folgen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=(api)&sensor=false">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42, -97),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var jobs = [
['Taylor', 'Texas', 30.570155, -97.409649, 'machine install and training'],
['Fort Riley', 'Kansas', 39.104172, -96.735558, 'machine install and training'],
['Toronto', 'Ontario, Canada', 43.653226, -79.383184, 'machine install and training'],
['Spokane', 'Washington', 47.658780, -117.426047, 'Machine install and training'],
['New Paris', 'Indiana', 41.504848, -85.826487, 'machine install'],
['Charleston', 'Mississippi', 34.00711, -90.055194, 'machine install and training'],
['Tinley Park', 'Illinois', 41.596405, -87.785119, 'training.'],
['Savannah', 'Georgia', 32.08078, -81.090719, 'machine install and training'],
['Long Island', 'New York', 40.852505, -73.135849, 'Machine install and training']
];
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infoWindow = new google.maps.InfoWindow;
for (var i = 0; i < jobs.length; i++) {
var city = jobs[i][0];
var state = jobs[i][1];
var lat = jobs[i][2];
var lng = jobs[i][3];
var desc = jobs[i][4];
var z = i;
var myLatLng = new google.maps.LatLng(lat, lng);
var content = '<div class="map-content"><h3>' + city + ', ' + state +
'</h3>' + desc + '</div>';
var marker = new google.maps.Marker({
map: map,
title: city + state,
position: myLatLng,
zIndex: z
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
return function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
})(marker, content));
// add the double-click event listener
google.maps.event.addListener(marker, 'dblclick', function(event){
map = marker.getMap();
map.setCenter(overlay.getPosition()); // set map center to marker position
smoothZoom(map, 12, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level
})
// the smooth zoom function
function smoothZoom (map, max, cnt) {
if (cnt >= max) {
return;
}
else {
y = google.maps.event.addListener(map, 'zoom_changed', function(event){
google.maps.event.removeListener(y);
self.smoothZoom(map, max, cnt + 1);
});
setTimeout(function(){map.setZoom(cnt)}, 80);
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map-canvas"/>
</body>
</html>
Wenn ich den Code für den Versuch, ein Zoom-Klick-Ereignisses, und nehmen Sie aus der Schleife entfernen, ist es nur für meine lange Insel Marker funktioniert (da dies die letzte Information in das Array, das verarbeitet wird). Jede Hilfe, wie man dies auf die Marker beim Klick zentriert, wäre großartig. Ich kann wirklich keine Suche finden, die auf Arrays und Loops implementiert wurde. Ich bin neu in der Google-API, und ich habe nur Basis-Javascript dazu getan.
EDIT: An example of this is here.
So einfach. Ich habe eine andere Variante zuvor mit .panTo versucht, aber es hat auch nicht richtig funktioniert. Ich habe gerade map.setZoom (9) hinzugefügt; dazu oben und es funktioniert super. Allerdings kann ich die smoothZoom-Funktion nicht ausführen. Ich habe auch viele Varianten davon versucht, aber solange ich hineinzoomen kann, denke ich, wenn der Marker zentriert ist, kann ich das machen. Vielen Dank! – charlwillia6