ในห้วข้อนี้เรามาพูดถึงการรับค่า Arguments ของ Event จากบทความก่อนหน้า Google Maps V3 : Events ได้กล่าวถึงประเภทของ Event มี 2 ประเภท ซึ่งการรับค่า Arguments ของ Event นั้น จะมาจาก Event ประเภท User Events เช่น Event click ของ Class Map จะมี Mouse event ส่งออกเมื่อ Map มีการถูกคลิก โดยที่ Mouse event จะมี Property latLng ให้ใช้งาน ส่วน Event อีกประเภทที่เป็น MVC state changed มักจะไม่มี Arguments ส่งออกมา
เราจะปักหมุดหรือสร้าง Marker เมื่อมีการคลิกลงบน Map พร้อมใส่ title ให้ Marker ซักหน่อยจะได้รู้ตำแหน่งที่เราได้ปักหมุดลงไป
google.maps.event.addListener(map, 'click', function(e) {
var marker2 = new google.maps.Marker({
position: e.latLng,
map: map,
title: e.latLng.toString()
});
});
<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.');
});
google.maps.event.addListener(map, 'click', function(e) {
var marker2 = new google.maps.Marker({
position: e.latLng,
map: map
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น