5
StackOverflowやGoogle検索で他の多くの記事を読んでいますが、これを正しく動作させることはできません。私はそれが私のforループと関係があると思います。私はすでにインフォメーションウインドウのmouseoverイベントを設定しましたが、私が望むのは、マーカーをクリックして地図上に置くと、そのマーカーを拡大することです。私が試してみました：Googleマップワンクリックで複数のマーカーを使ってマーカーを拡大する
最高に取り組んできましたが、それでも常に特に複数回クリックした後、マーカーを中心にしません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だけを行っています。
EDIT：あなたはスコープの問題を抱えているようAn example of this is here.
それほど単純です。私は以前の.panToで別のバリエーションを試しましたが、正しく動作しませんでした。私はmap.setZoom（9）を追加しました。これを上にして、それは素晴らしい作品です。しかし、私は機能するsmoothZoom関数を取得することはできません。それも多くのバリエーションを試してみましたが、ズームインすることができる限り、マーカーを中心にしていると思います。私はこの作業を行うことができます。ありがとう！ – charlwillia6