เฉลยแบบฝึกหัดบทที่ 6




<html lang="en"<
<head<<title<Map 6</title<
<style type="text/css"<

/* Global */

html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font: 12px/1.2 Meiryo, Tahoma, san-serif; }

ul { list-style: disc inside; padding: 0 0 0 12px; }
a:link, a:visited { color: #006699; outline: none; text-decoration: none; }
a:hover, a:active { color: #ee8800; outline: none; text-decoration: underline; }

/* Local */


#map { width: 100%; height: 100%; float: right; }

.totop { margin: 16px 8px 8px 0; float: right; }

.box { width:95%; margin: 12px 0 12px -12px; padding: 6px !important; box-shadow:3px 3px 3px #888888; border: 3px dashed #888888 !important; }
pre.box { background-color: #ffcccc; border-color: #cd9b9b; white-space: pre-wrap; overflow: auto; }
div.box { background-color:#cae1ff; border-color: #5f9ea0; }

.title { margin: 0 0 8px 0; font-weight: bold; text-decoration: underline; }

/* Route */
#route { position: absolute; top: 5%; right: 0; width: 20%; height: 90%; overflow: auto; z-index: 1; }
#aaa { color: #006699; outline: none; text-decoration: none; }
#aaa:hover { color: #ee8800; outline: none; text-decoration: underline; }

</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'),
		  zoom: 15,
		  lastView:false,
		   location:{lat:13.79435,lon:100.65184}
		});
		map.Route.placeholder(document.getElementById('route'));
		map.Route.add({lon: 100.65184, lat:13.79435});
		map.Route.add({lon: 100.64266, lat:13.76717});
		
		map.Route.search();
		map.Route.enableContextMenu();
		map.Route.auto(true);
		
		map.Event.bind('beforeContextmenu', function(event) {
			var element = document.createElement('div');
			element.class = 'abc';
			element.id = 'aaa';
			element.innerHTML = 'clear search';
			element.style.cursor = 'pointer';
			element.onclick = function() {
			map.Route.clear();
				};
			event.add(element);
		});
		map.Event.bind('beforeContextmenu', function(event) {
			var element = document.createElement('div');
			element.class = 'abc';
			element.id = 'aaa';
			element.innerHTML = 'Home < The Mall';
			element.style.cursor = 'pointer';
			element.onclick = function() {
			homethemall();
			};
			event.add(element);
		});
	}
	function homethemall(){
		map.Route.placeholder(document.getElementById('route'));
		map.Route.add({lon: 100.65184, lat:13.79435});
		map.Route.add({lon: 100.64266, lat:13.76717});
		
		map.Route.search();
		map.Route.enableContextMenu();
		map.Route.auto(true);
		}
	</script<


</head<

<body onload="init();"<
	<div id = "map"<</div<
	<div id = "route"<</div<
</body<
</html<