<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Map 4</title>
<style>
body{
margin:0 0 0 0;
padding:0 0 0 0;
}
#map{
width:70%;
height:80%;
float:left;
}
#searchresult{
margin-left:20;
}
#theyresult{
font-size: 13;
}
#searchbar{
clear:both;
}
#route {
height:80%;
float:left;
width: 200;
}
#aaa { color: #006699; outline: none; text-decoration: none; }
#aaa:hover { color: #ee8800; outline: none; text-decoration: underline; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://api.longdo.com/map/?key=xxxxxxxxxxxxxx"></script>
<script>
var map;
var message;
function init(){
map = new longdo.Map({
placeholder: document.getElementById('map'),
lastView: false,
zoom: 15,
location: {lon: 98.94811, lat: 18.81065},
});
map.Route.placeholder(document.getElementById('route')); //สั่งให้แถบแสดงเส้นทางใน div route
map.Route.enableContextMenu();
map.Route.auto(true);
map.Route.search();
map.Event.bind('beforeContextmenu', function(event) { //event 'beforeContextmenu' คือแถบเมนูคลิกขวา
var element = document.createElement('div'); //สั่งให้เพิ่ม option clear search เมื่อคลิกขวา
element.class = 'abc';
element.id = 'aaa';
element.innerHTML = 'clear search';
element.style.cursor = 'pointer';
element.onclick = function() {
map.Route.clear();
};
event.add(element);
});
}
</script>
<script type="text/javascript">
var suggestTimeout;
var suggestKeyword = null;
var searchKeyword = null;
var suggestList = [];
$(function() {
$('#searchbox').keyup(function(event) {
if (event.keyCode == 13) {
doSearch();
return;
}
clearTimeout(suggestTimeout);
suggestTimeout = setTimeout(function() {
doSuggest();
}, 100);
});
$('#searchbutton').click(doSearch);
});
function doSuggest() {
var value = $('#searchbox').val();
if (value == suggestKeyword) return;
if (value.length < 3) {
$('#searchresult').html('Type at least 3 characters');
return;
}
suggestKeyword = value;
searchKeyword = null;
$('#searchresult').empty();
$.getJSON('http://api.longdo.com/map/services/suggest?callback=?', {
keyword: suggestKeyword
}, function(msg) {
if (msg.meta.keyword != suggestKeyword) return;
var html = '';
for (var i = 0; i < msg.data.length; i++) {
suggestList[i] = msg.data[i].w;
html += '<a href="javascript:suggestClick(' + i + ')">' + msg.data[i].d + '</a><br />';
}
$('#searchresult').html(html);
});
}
function suggestClick(index) {
$('#searchbox').val(suggestList[index]);
doSearch();
}
function doSearch() {
clearTimeout(suggestTimeout);
suggestKeyword = null;
searchKeyword = $('#searchbox').val();
$('#searchresult').empty();
var data = {};
var linktest = '';
if (searchKeyword) data.keyword = searchKeyword;
if ($('#lat').val()) data.lat = $('#lat').val();
if ($('#lon').val()) data.lon = $('#lon').val();
if ($('#area').val()) data.area = $('#area').val();
if ($('#tag').val()) data.tag = $('#tag').val();
if ($('#locale').val()) data.locale = $('#locale').val();
if ($('#offset').val()) data.offset = $('#offset').val();
if ($('#limit').val()) data.limit = $('#limit').val();
if ($('#span').val()) data.span = $('#span').val();
$.getJSON('http://api.longdo.com/map/services/search?callback=?', data, function(msg) {
if (msg.meta.keyword != searchKeyword && msg.meta.keyword != 'tag: ' + data.tag) return;
var html = 'start: ' + msg.meta.start + ' end: ' + msg.meta.end + ' hasmore: ' + msg.meta.hasmore + '<ol>';
for (var i = 0; i < msg.data.length; i++) {
<!-- html += '<li>' + msg.data[i].name + '</li>'; -->
<!-- linktest+= '<a href="map.location({'+lat: msg.data[i].lat+','+lon: msg.data[i].lon+' })">'+"aaaaaa"+'</a>'; -->
message = msg;
linktest += '<a href="#" onclick="map.location({lat: '+message.data[i].lat+', lon: '+message.data[i].lon+'});">'+message.data[i].name+ '</a>'
+ '<br>';
}
$('#searchresult').html(html + '</ol>');
$('#theyresult').html(linktest +'</ol>');
});
}
function quickaddloc(){ //เพิ่มตำแน่ง ณ กากบาท ลงในเส้นทาง
var loc = map.location();
map.Route.add(loc);
}
</script>
</head>
<body onload="init()" >
<div id = "route"></div>
<div id="map"></div>
<div id="theyresult"></div>
<div id="searchresult"></div>
<div id="searchbar">
<div>
Keyword: <input id="searchbox" type="text" />
<button class="seacrh-btn" id="searchbutton" type="button" >search</button>
<button id="quickadd" onclick="quickaddloc()">quick add</button> <!-- //เพิ่มตำแน่ง ณ กากบาท ลงในเส้นทาง -->
</br>
</div>
<table id="searchoption"> <!-- ตั้งค่าเริ่มต้นที่จะขึ้นใน textbox เพื่อกำหนดขอบเขตค้นหา; area = 50 หมายถึงค้นหาในพื้นที่เชียงใหม่เท่านั้น -->
<!--lat คือ พิกัด Latitude
lon คือ พิกัด Longitude
area คือ รหัสจังหวัดหรือ รหัสประเทศ
tag คือ หมวดหมู่ในการค้นหา เช่น โรงแรม, โรงเรียน, โรงพยาบาล เป็นต้น
locale คือ ภาษาของผลการค้นหา เช่น th, en เป็นต้น
offset คือ ลำดับของผลการค้นหา เช่น ต้องการดูผลการค้นหาตั้งแต่ลำดับที่ 21 ให้ใส่ 20 ลงในช่อง
limitคือ จำนวนจำกัดของผลการค้นหา
spanคือ ขอบเขตของการค้นหา เช่น 100m, 1000km เป็นต้น
-->
<tr>
<td>lat: </td><td><input id="lat" type="text" value="" /></td>
<td>lon: </td><td><input id="lon" type="text" value="" /></td>
<td>area: </td><td><input id="area" type="text" value="50" /></td>
<td>tag: </td><td><input id="tag" type="text" value="" /></td>
</tr>
<tr>
<td>locale: </td><td><input id="locale" type="text" value="th" /></td>
<td>offset: </td><td><input id="offset" type="text" value="" /></td>
<td>limit: </td><td><input id="limit" type="text" value="20" /></td>
<td>span: </td><td><input id="span" type="text" value="" /></td>
</tr>
</table>
</div>
</body>
</html>