<!-- Q3 สร้าง customdiv ตามตำแหน่งที่คลิกบนแผนที่ โดยใช้ฟังก์ชันที่กล่าวมาแล้วโดยข้างต้นซึ่งใน div ที่สร้างขึ้นให้ใส่ icon รูปรถบรรทุกไว้ และสามารถสร้างได้หลายๆ div
ด้วยการคลิกที่แผนที่(คลิกซ้ายบนแผนที่จะเพิ่ม icon รูปรถบรรทุก แต่หาก drag แผนที่หรือ double click จะไม่เพิ่ม icon รถบรรทุก)ลบรถบรรทุกเมื่อ click ซ้ายที่ตัวรถ
และย้ายตำแหน่งรถได้เมื่อ drag mouse
-->
<html>
<head><title>Map 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body { margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://api.longdo.com/map/?key=xxxxxxxxxxxxxx"></script>
<script type="text/javascript">
var map;
function init() {
map = new longdo.Map({
placeholder: document.getElementById('map'),
lastView: false
});
map.Event.bind('overlayClick',function(markerSelect){ //เปิดการใข้งาน event 'overlayClick' ซึ่งจะเรียกฟังค์ชั่นทุกครั้งที่มีการคลิก overlay และตั้งชื่อ overlay ที่ถูกคลิกว่า markerSelect
map.Overlays.remove(markerSelect); //remove overlay ที่ชื่อว่า markerSelect
});
map.Event.bind('click',function(){ //เปิดการใช้งาน event 'click' ซึ่งจะเรียกฟังค์ชั่นทุกครั้งที่มีการคลิกบน map
addtruck();
});
}
</script>
<script>
function addtruck(){ //ฟังค์ชั่นที่ทำการเพิ่มรถบรรทุก
var loc = map.location('POINTER'); //map.location('POINTER') จะเป็นค่าพิกัดของเม้าส์ ในmap
marker= new longdo.Marker(loc, //สร้าง Marker ซึ่งเป็น longdo object โดยลิ้งค์icon ไปที่รูปรถบรรทุก และตั้งค่าให้ คลิก/ลาก ได้
{
icon: {
url: 'truck.png'
},
clickable:true,
draggable: true
});
map.Overlays.add(marker); //แสดง marker ลงบน map
}
</script>
</head>
<body onload="init()">
<div id = "map"></div>
</body>
</html>