 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>add_project</title>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
var icontechnic = new GIcon();
icontechnic.image = 'http://upload.siamza.com/file_upload/modify/030110/494689.png';
icontechnic.iconSize =new GSize(50,50);
icontechnic.shadowSize = new GSize(50,50);
icontechnic.iconAnchor = new GPoint(6, 20);
icontechnic.infoWindowAnchor = new GPoint(5, 1);
var iconred = new GIcon();
iconred.image = 'http://upload.siamza.com/file_upload/modify/030110/494689.png';
iconred.iconSize =new GSize(50,50);
iconred.shadowSize = new GSize(50,50);
iconred.iconAnchor = new GPoint(6, 20);
iconred.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["ร้านแก๊ส"] = iconLightcoral;
customIcons["ห้างสรรพสินค้าบิ๊กซี"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(13.820453,100.052919),14);
GDownloadUrl("xml/xml_customer.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var sidebar2 = document.getElementById('sidebar2');
sidebar2.innerHTML = '';
if (markers.length == 0) {
sidebar2.innerHTML = 'No results found.';
return;
}
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GOverviewMapControl());//คอนโทรคเพิ่มแผนที่ขนาดเล็กแต่ย่อ
map.setUIToDefault() //การเพิ่มคอนโทรลของ Scrollwhell Zoomming ตั้งค่าเริ่มต้นแบบ Gmap เลย
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var id_icon = markers[i].getAttribute("id");
var type_icon = markers[i].getAttribute("type");
var name_icon = markers[i].getAttribute("name");
var address_icon = markers[i].getAttribute("add");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, type_icon, name_icon, address_icon,id_icon);
map.addOverlay(marker);
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var sidebarEntry = createSidebarEntry(marker, type_icon, name_icon, address_icon,id_icon);
sidebar2.appendChild(sidebarEntry);
bounds.extend(point);
}
});
}
}
//ในส่วนของการแสดงรายละเอียกบนจุด Marker
function createMarker(point, type_icon, name_icon, address_icon , id_icon) {
var marker = new GMarker(point, customIcons[type_icon]);
var html = "<center><table width=300><tr><td>"+ "ชนิดสถานที่ :" +type_icon +"<br>"+ "ชื่อ/ชื่อสถานที่ :" + name_icon +"<br>"+"ที่อยู่ :"+ address_icon +"<br>" + "รหัส :" + id_icon +"</td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// chk เเล้ว
// chk เเล้ว
// ในส่วนของการแสดงรายละเอียด ทางขวามือ
function createSidebarEntry(marker, type_icon,name_icon, address_icon, id_icon) {
var div = document.createElement('div');
var html = "<b>"+"ชนิดสถานที่ :" + type_icon + "<br>"+"ชื่อ/ชื่อสถานที่ :"+ name_icon + " <br/>"+"ที่อยู่ :"+ address_icon +"<br>"
+"รหัส:"+ id_icon +"</b><br/> ---------------------------------------- <br/>";
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
// chk เเล้ว
function initialize() {
GEvent.addListener(map,"click", function(overlay,latlng) {
if (latlng) {
var matchll = /\(([-.\d]*), ([-.\d]*)/.exec( latlng );
if ( matchll ) {
var lat = parseFloat( matchll[1] );
var lng = parseFloat( matchll[2] );
lat = lat.toFixed(6);
lng = lng.toFixed(6);
}
var myHtml = "<center>คุณได้เลือกตำแหน่งบ้านลูกค้าเรียบร้อยแล้ว:<br> <input type='button' onClick='javascript:addlocation("+lat+","+lng+");' value='คลิกเพื่อกรอกรายละเอียด'></center>";
map.openInfoWindow(latlng, myHtml);
}
});
}
// chk เเล้ว
function addlocation(lat,lng){
window.location="customer_add.php?lat="+lat+"&lng="+lng;
}
</script>
</head>
<body onload="load(),initialize()" onunload="GUnload()">
<div id="page">
<!-- start content -->
<div id="con_1">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="con_2">
<ul>
<li>
<div id="sidebar2" style="overflow: auto; height: 360px; font-size: 11px; color: #000"></div>
</li>
</ul>
</li>
</ul>
</div>
<div id="con_3">
<td width="200" bgcolor="#FFFFFF"><p><span class="style6"><br />
<form id="form1" method="post" action="search_near.php">
<table width="200" border="0">
<tr>
<td>กรุณาใส่ชื่อสถานที่</td>
</tr>
<tr>
<td><input name="asearch" type="text" id="asearch" value="" size="20" maxlength="20" tabindex="1"/></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="ค้นหา" />
<input type="reset" name="button2" id="button" value="ล้างข้อมูล" tabindex="3" /></td>
</tr>
</table>
</form>
<tr>
<td><div id="sidebar3" style="overflow: auto; height: 170px; font-size: 12px; color: #000"></div></td>
</tr>
</table>
</div>
<!-- end sidebar -->
</div>
<!-- end page -->
</body>
</html>
หรือไม่งั้นเเมลล์ถามเราได้ นะ [email protected]
|
 |
 |
 |
 |
| Date :
2010-03-31 23:28:25 |
By :
deathzap |
|
 |
 |
 |
 |
|
|
 |
