API Overview / Events-GoogleMaps/API/doc/APIoverview/02-Events-N☆E 学習帳

[ リロード ]   [ ソース ]  [ トップ | 一覧 | 単語検索 | 最新 | バックアップ | ヘルプ ]

Counter: 3473, today: 1, yesterday: 1

API Overview / Events

http://www.google.com/apis/maps/docu­mentation/

Version 2 (2006.4)

You can add dynamic elements to your application by using event listeners. An object exports a number of named events, and your application can "listen" to those events using the static methods GEvent.addListener and GEvent.bind. For example, this code snippet shows an alert every time the user clicks on the map:

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
   alert("You clicked the map.");
});

GEvent.addListener takes a function as the third argument, which promotes the use of function closures for event handlers. If you want to bind an event to a method on a class instance, you can use GEvent.bind. In the following example, an application class instance binds map events to its own methods, modifying class state when events are triggered:

function MyApplication() {
   this.counter = 0;
   this.map = new GMap2(document.getElementById("map"));
   this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   GEvent.bind(this.map, "click", this, this.onMapClick);
}
 
MyApplication.prototype.onMapClick = function() {
   this.counter++;
   alert("You have clicked the map " + this.counter + " " +
     (this.counter == 1 ?"time" : "times"));
}
 
var application = new MyApplication();

Version 1

↓大雑把なまとめ

  • イベントリスナーでダイナミックエレメントを追加
  • 多くのオブジェクトには多くのイベントがあるよ
  • アプリはGEvent.addListenerとかGEvent.bindを使うことでイベントを受ける
  • ユーザーがマップをクリックするといつでもアラートが発生

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "click", function() {
  alert("You clicked the map");
});

GoogleMaps/API/doc/12-ex_clickhandling のスクリプトを上記に書き換えたものを以下に用意しました。
http://never-ever.info/googlemaps/cl­ickalert.php (別窓)

function MyApplication() {
  this.counter = 0;
  this.map = new GMap(document.getElementById("map"));
  GEvent.bind(this.map, "click", this, this.onMapClick);
}

MyApplication.prototype.onMapClick() {
  this.counter++;
  alert("You have clicked the map " + this.counter +
            this.counter == 1 ?" time.":" times.");
}

var application = new MyApplication();

↑これがうまく動かない(宿題)


(2005.12)

You can add dynamic elements to your application by using event listeners. An object exports a number of named events, and your application can "listen" to those events using the static methods GEvent.addListener or GEvent.bind. For example, the following code snippet shows an alert every time the visitor clicks anywhere in the map:

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
GEvent.addListener(map, 'click', function() {
  alert("You clicked the map.");
});

GEvent.addListener takes a function as the third argument, which promotes the use of function closures for event handlers. If you want to bind an event to a class method, you can use GEvent.bind. For example:

function onLoad() {

	function MyApplication() {
	  this.counter = 0;
	  this.map = new GMap(document.getElementById("map"));
	  GEvent.bind(this.map, 'click', this, this.onMapClick);
	}
	
	MyApplication.prototype.onMapClick = function() {
	  this.counter++;
	  alert("You have clicked the map " + this.counter +
				(this.counter == 1 ?" time.":" times."));
	}

	var application = new MyApplication();
	application.map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

}

微妙に変わってるかな