5
我已经阅读了很多其他帖子在StackOverflow和谷歌搜索，我仍然无法得到这个工作正常。我认为这与我的循环有关。我已经为信息窗口设置了一个鼠标悬停事件，但是我想要的是，当您单击地图并将其放在地图中时，地图可以放大标记。我曾尝试：谷歌地图放大标记点击多个标记
google.maps.event.addListener(marker,'click',function(e) {
map.setZoom(9);
map.setCenter(e.latLng);
});
而已经工作过的最好的，但仍不能总是在记号中心，尤其是在多次点击后。有时标记甚至不在视图中。
的代码片段，我真的想用的就是这个：
// 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);
}
}
因为它是假设有平滑变焦。然而，我无法让这个人几乎不工作。大多数标记点击纽约长岛或无处。
我的代码如下：
<!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>
如果我删除代码用于尝试与变焦点击事件，并把它拿出来循环的，它仅适用于我的长岛标记（因为这是在过去的信息处理的数组）。任何关于如何以点击标记为中心的帮助都很好。我无法找到任何已经在数组和循环中实现的搜索。我是Google API的新手，并且我只在其上完成了基本的Javascript。
编辑：An example of this is here.
太简单了。我之前用.panTo尝试了另一种变体，但它也无法正确工作。我刚刚添加了map.setZoom（9）;到这上面，它很好。但是我无法使smoothZoom功能正常工作。尝试了很多变化，但只要我可以放大，我猜想以标记为中心，我可以做这个工作。谢谢！ – charlwillia6