Googleマップイベント
グーグルマップイベントを拘束 - ズームするマーカーをクリックしてください。
マーカーズームマップをクリックしてください
我々はまだ、再びロンドンを使用して、紙の地図を使用します。
ポイントは、ユーザーがマーカーをクリックすると、ズーム機能を実現する(ズームマップマーカーが結合事象をクリックします)。
次のようにコードは次のとおりです。
例
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
»をお試しください
イベントリスナーを登録するためにはaddListener()イベントハンドラを使用してください。 指定したイベントが発生したときにメソッドが呼び出されます、をリッスンするために、イベントをオブジェクトを使用しています。
フラグをリセット
私たちは3秒center_changedイベントがシフトセンターにマークされた後、次のコードを使用し、「センター」プロパティを変更するには、マップにイベントハンドラを追加します。
例
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
»をお試しください
マーカーは、情報ウィンドウを開くためにクリックされたとき。
メッセージウィンドウ内のいくつかのテキストを表示するためのマーカーをクリックしてください:
例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
»をお試しください
開いている各ウィンドウのラベルやタグ情報を設定します。
ユーザーが地図上でクリックしたウィンドウの実装
ユーザーがマーカーを配置し、ポップアップメッセージウィンドウをするために指定された場所に位置placeMarker()関数にマップをクリックしてください:
例
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
»をお試しください