|
 |
| |
สอบถามเรื่องการแสดงแผนที่ Google Maps Javascript API ให้เร็วขึ้นค่ะ |
| |
 |
|
|
 |
 |
|
ต้องเอามาดูว่าเขียนไว้แบบใหนน่ะครับ พูดมาลอย ๆ มันเดาโค้ดไม่ถูกหรอกครับ แต่ละคนมีวิธีการเขียนไม่เหมือนกัน ปัญหาก็จะไม่เหมือนกัน
ฝากลงโค้ดไว้ จะได้ทดลองให้ครับ
|
 |
 |
 |
 |
| Date :
2015-03-19 07:29:55 |
By :
deawx |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>
<? include("title.html"); ?>
</title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:14px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:1024px;
height:500px;
margin:auto;
margin-top:0px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><? include ("headder.html"); ?></td>
</tr>
<tr bgcolor="#9CFF99">
<td bgcolor="#EDE42F"><? include("top_menu.php"); ?></td>
</tr>
<tr bgcolor="#9CFF99">
<td align="center" bgcolor="#EDE42F"><strong>:ลบข้อมูล:</strong></td>
</tr>
</table>
<div id="map_canvas"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(18.285877, 99.512790);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 8, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:GGM.MapTypeId.HYBRID, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
var image = {
url: 'image/point_yellow.png',
// This marker is 32 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
$.ajax({
url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
success:function(xml){
$(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerName=$(this).find("name").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLat=$(this).find("latitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerDataID=$(this).find("dataid").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLatLng=new GGM.LatLng(markerLat,markerLng);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
icon: image,
title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
//infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
//content: my_Marker[i].getTitle(), // ดึง title ในตัว marker มาแสดงใน infowindow
//});
// // กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
infowindow[i] = new GGM.InfoWindow({
content:$.ajax({
url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
//data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
data:"placeID="+markerDataID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
async:false
}).responseText
});
GGM.event.addListener(my_Marker[i], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
});
}
});
}
$(function(){
// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
// v=3.2&sensor=false&language=th&callback=initialize
// v เวอร์ชัน่ 3.2
// sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
// language ภาษา th ,en เป็นต้น
// callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
$("<script/>", {
"type": "text/javascript",
src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#E5E523"><? include ("footer.php"); ?></td>
</tr>
</table>
<!--Code Menu-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
genMarker.php
Code (PHP)
<?php
header("Content-type:text/xml; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
include("conndb.php");
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<markers>
<?php
$q="SELECT id_reccord , id_vill_no , vill_no , vill_name , lat , longs FROM tb_point_vill WHERE 1 ORDER BY abs(id_vill_no) ASC ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
$sub_id_vill_no = substr($rs['id_vill_no'],0,6);
$rs_tambon = mysql_query("select code_tambon , name_tambon , code_amphoe from tambon where code_tambon = '".$sub_id_vill_no."'");
$arr_tambon = mysql_fetch_assoc($rs_tambon);
$rs_amphoe = mysql_query("select code_amphoe , name_amphoe from amphoe where code_amphoe = '".$arr_tambon['code_amphoe']."'");
$arr_amphoe = mysql_fetch_assoc($rs_amphoe);
?>
<marker id="<?=$rs['id_reccord']?>">
<name><? echo "หมู่ที่ ".$rs['vill_no']." ".$rs['vill_name']." ".$arr_tambon['name_tambon']." ".$arr_amphoe['name_amphoe']." ...";?></name>
<latitude><?=$rs['lat']?></latitude>
<longitude><?=$rs['longs']?></longitude>
<dataid><?=$rs["id_vill_no"]?></dataid>
</marker>
<?php } ?>
</markers>
|
| |
|
|
| |
| Date :
2015-03-19 10:46:39 |
By :
naomikijung |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
