Przeczytałem wiele innych postów tutaj o StackOverflow i wyszukiwarce Google, ale nadal nie mogę tego zrobić, aby działało poprawnie. Myślę, że ma to coś wspólnego z moją pętlą for. Już ustawiłem zdarzenie mouseover dla okien informacyjnych, ale chcę, aby mapa powiększała znacznik po kliknięciu i wyśrodkowaniu na mapie. Próbowałem:Google Maps Powiększ Marker za pomocą jednego kliknięcia Wiele znaczników
google.maps.event.addListener(marker,'click',function(e) {
map.setZoom(9);
map.setCenter(e.latLng);
});
Który działał najlepiej, ale nadal nie zawsze znajduje się na środku znacznika, zwłaszcza po wielu kliknięciach. Czasami znacznik nie jest nawet widoczny.
Fragment kodu, który naprawdę chciałem użyć to:
// 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);
}
}
Bo to jest przypuszczać, aby mieć gładką zoom. Jednak nie mogę tego w ogóle popracować. Większość kliknięć znaczników trafia do Long Island NY lub nigdzie.
Mój kod następująco:
<!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>
Jeśli usunąć kod próbuje zdarzenie powiększyć Kliknij i zabrać go z pętli, to działa tylko dla mojej długiej markera Island (ponieważ jest to ostatnia informacja w tablica, która jest przetwarzana). Każda pomoc, jak uzyskać to na środku znaczników po kliknięciu, będzie świetna. Naprawdę nie mogę znaleźć niczego, co zostało zaimplementowane na tablicach i pętlach. Jestem nowicjuszem w Google API, a do tego mam tylko podstawową obsługę JavaScript.
EDIT: An example of this is here.
Tak prosty. Próbowałem innej wersji wcześniej z .panTo, ale też nie działało poprawnie. Właśnie dodałem map.setZoom (9); do tego powyżej i działa świetnie. Jednak nie mogę uruchomić funkcji smoothZoom. Próbowałem wielu wariacji, ale tak długo, jak mogę powiększać, myślę, że ze znacznikiem wyśrodkowanym, mogę wykonać tę pracę. Dzięki! – charlwillia6