เมื่อเราพูดถึง Events คือการดักจักเหตุการณ์ต่างๆ ของ Object นั้นๆ โดยที่ Object นั้นจะส่งสัญญาณออกมาว่าโดนกระทำอะไรก็ส่งออกมา เราก็มาดักจับสัญญาณนั้นๆ ว่าจะให้ทำอะไร เช่นในหัวข้อนี้เราจะมาดักจับ Events ของ Marker โดย Events ของ Marker เมื่อเราดูที่ API
Reference ของ Maps API V3 มีตามนี้
events ถูกแบ่งแยกออกเป็น 2 ประเภท คือ
- User events ส่วนใหญ่เป็น events ที่มาจากผู้ใช้งานผ่านทางการคลิกเมาส์หรือกดคีย์บอร์ด เช่น 'click', 'mousedown' เป็นต้น
- MVC state change เป็น events ที่มาจากการบอกสถานะต่างๆ ของ Object ที่ถูกเปลี่ยนไป เช่น 'zoom_changed' จาก Class ของ Map, 'position_changed' จาก Class ของ Marker ส่วนใหญ่มีข้อตกลงตั้งชื่อเป็น property_changed
การใช้งาน event handlers หรือดับจับเหตุการณ์ ใน Maps API เราจะใช้คำสั่ง addListener() ใน namespace ที่ชือว่า google.maps.event ซึ่งเป็นคำสั่งเกี่ยวกับ event listeners ใน JavaScript
เราจะดับจับ event เมื่อ Marker ถูกคลิก ให้แสดง Message ออกมา
google.maps.event.addListener(marker, 'click', function() {
alert(' Marker was clicked.');
});
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(13.742762, 100.535631);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setIcon('http://google-maps-icons.googlecode.com/files/restaurant.png');
marker.draggable = true;
google.maps.event.addListener(marker, 'click', function() {
alert(' Marker was clicked.');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น