Google Map real time (Marker จุดเดิมไม่หายหลังจาก update จุดใหม่แล้ว)
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา Google Map real time (Marker จุดเดิมไม่หายหลังจาก update จุดใหม่แล้ว)
Google Map real time (Marker จุดเดิมไม่หายหลังจาก update จุดใหม่แล้ว)
Copy
สวัสดีครับพี่ Ninenik พอดีผมมีปัญหาเกี่ยวกับ Marker บน google Map จุดเดิมมันไม่หายครับ แต่จุดใหม่ก็ขึ้นมานะครับ
- ผมเอาโค๊ดตัวอย่างของบทที่ 1 - 5
- แสดง infowindow เนื้อหา เมื่อคลิก icons ใน google map ตอนที่ 5
- แล้วใช้ runtime เข้ามาครอบ ajax ที่ดึงค่าจาก xml (ให้มัน refresh update ค่าใหม่ทุกๆ 3 วิ)
- ภาพหลัง update จาก Database แล้ว มัน refresh 3 วิ ตามคำสั่ง
- code ทั้งหน้า
- ผมเอาโค๊ดตัวอย่างของบทที่ 1 - 5
- แสดง infowindow เนื้อหา เมื่อคลิก icons ใน google map ตอนที่ 5
- แล้วใช้ runtime เข้ามาครอบ ajax ที่ดึงค่าจาก xml (ให้มัน refresh update ค่าใหม่ทุกๆ 3 วิ)
$(function(){
setInterval(function(){
},3000);
});
- ภาพตอน run ครั้งแรก- ภาพหลัง update จาก Database แล้ว มัน refresh 3 วิ ตามคำสั่ง
- code ทั้งหน้า
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta http-equiv="refresh" content="500"> -->
<title>Google Map API 3 - Friend 01</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:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:650px;
height:500px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var markerID=[]; // ประกาศเป็น arrray สำหรับเก็บค่า id
var markerName=[]; // ประกาศเป็น arrray สำหรับเก็บค่า name
var markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitude
var markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitude
var markerDate=[]; // ประกาศเป็น arrray สำหรับเก็บ datetime
var narkerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ icon
var markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google map
var contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ icon
var image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google map
var image2='icon/customer.png';
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 12, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
// เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude ปัจจุบัน
var myPosition_lon=position.coords.longitude; // เก็บค่าตำแหน่ง longitude ปัจจุบัน
// สรัาง LatLng ตำแหน่ง สำหรับ google map
var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน
$.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล
myPosition_lat:myPosition_lat, // ส่งค่า latitude
myPosition_lon:myPosition_lon // ส่งค่า longitude
},function(){
map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน
});
var my_Marker = new GGM.Marker({ // สร้างตัว marker
position:pos, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
icon: image2,
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:'จุดเกิดเหตุ' // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
mapCircle = new GGM.Circle({ // สร้างตัว circle
strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ
strokeOpacity: 0.8, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0 - 0.1
strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel
fillColor: "#FF0000", // สีของวงกลม circle
fillOpacity: 0.35, // ความโปร่งใส กำหนดจาก 0.0 - 0.1
map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map
center: pos, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ศูนย์กลางแผนที่
radius: 750 // รัศมีวงกลม circle ทีสร้าง หน่ายเป็น เมตร
});
},function() {
// คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
});
}else{
// คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
}
$(function(){ //โค๊ดที่เพิ่มลงไปใหม่ refresh ทุกๆ 3s
setInterval(function(){
// ใช้ ajax ดึงค่าจาก xml มาใช้งาน
var xml = $.ajax({
url:"friend_list.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
async:false,
success:function(xml){
$(xml).find("marker").each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
markerID[i]=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerName[i]=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerLat[i]=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerLng[i]=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerDate[i]=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
narkerIcons[i]=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]);
image1[i] = new GGM.MarkerImage(narkerIcons[i], // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons
new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng[i], // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
icon: image1[i], // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// จัดรูปแบบ เนื้อหาใน infowndow
contentData[i]=markerName[i]+"<br/>"+markerDate[i]+"<br/>"+markerLat[i]+","+markerLng[i];
infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
content: contentData[i] // แสดงเนื้อหา ของแต่ละ icons
});
GGM.event.addListener(my_Marker[i], "click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp!=null){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
// console.log($(this).find("id").text());
});
}
}).responseText;
},3000);
});
}
$(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>
</body>
</html>
Decode
03-09-2014
12:30:03
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Author Ninenik Narkdee
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ