StackOverflow ve Google Arama'da burada bir sürü yayın daha okudum ve yine de düzgün şekilde çalışmaya devam edemiyorum. Benim için döngüde bir şey olduğunu düşünüyorum. Bilgi pencereleri için bir mouseover olayı ayarlamıştım, ancak istediğim, haritayı tıklatıp haritayı ortaladığınızda işaretçiyi yakınlaştırmak. Ben denedim: Özellikle birden çok tıklama sonrasında, her zaman işaretleyici üzerinde ortalamak değil hala en iyi çalıştı ama etmiştirGoogle Maps Tek Tıklama Birden Çok İşaretçi ile İşaretleyicide Yakınlaştır
google.maps.event.addListener(marker,'click',function(e) {
map.setZoom(9);
map.setCenter(e.latLng);
});
. Bazen işaretçi bile görüş alanında değildir.
Gerçekten kullanmak istedi kod parçacığı şudur:
// 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);
}
}
o pürüzsüz zoom için varsayalım çünkü. Ancak, bunu hiç zorlukla yapamayacağım. İşaretleyicilerin çoğu tıklatması Long Island NY ya da hiçbir yere gitmez.
Kodum takip: Bir yakınlaştırma click olayı deneyen ve döngünün dışına çıkarmak için kod kaldırırsanız
<!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>
, sadece (benim uzun ada işaretleyici için çalıştığını son bilgiler olduğundan işlenen dizi). Bunu tıklamadaki işaretçilere odaklamak için nasıl yardımcı olacaksınız. Diziler ve döngülere uygulanan bir şey bulamıyorum. Google API’da yeniyim ve bununla ilgili olarak yalnızca temel Javascript’i yaptım.
DÜZENLEME: Bir kapsam sorunu var gibi An example of this is here.
Çok basit. .panTo ile daha önce başka bir varyasyon denedim, ancak doğru da çalışmadı. Ben sadece map.setZoom (9) ekledim; Bu yukarıda ve harika çalışıyor. Ancak çalışmak için smoothZoom işlevini alamıyorum. Çok fazla varyasyondan bahsetmiştim, ama yakınlaştırdığım sürece işaretleyici ortadayken, bu işi yapabilirim. Teşekkürler! – charlwillia6