โดย Ik Kat » 03/07/2017 6:44 pm
วิธีการปัดหมุด บน Google Maps API โดยการดึงค่า Latitude และ Longitude มาจากฐานข้อมูล
MySQLด้วยการใช้
PHP เป็นอีกวิธีหนึ่งที่เหมาะสำหรับการปักหมุดหลาย ๆ ตำแหน่ง เพราะจะมีการเก็บค่าตำแหน่งต่าง ๆ ไว้ในฐานข้อมูล หากเราต้องการเพิ่มหรือลบตำแหน่งก็สามารถทำในฐานข้อมูลได้เลย
สร้างฐานข้อมูล ใน MySQL :
โค้ด: เลือกทั้งหมด
CREATE TABLE `location` (
`LOC_ID` int(10) NOT NULL auto_increment,
`LOC_NAME` varchar(250) NOT NULL,
`LAT` varchar(50) NOT NULL,
`LNG` varchar(50) NOT NULL,
PRIMARY KEY (`LOC_ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
INSERT INTO `location` VALUES (1, 'Test1', '13.836760', '100.582560');
INSERT INTO `location` VALUES (2, 'Test2', '13.836328', '100.582123');
INSERT INTO `location` VALUES (3,'Test3', '13.837205', '100.581205');
json.php :
โค้ด: เลือกทั้งหมด
<?php
header('Content-Type: application/json');
$objConnect = mysql_connect("localhost","root","root");
$objDB = mysql_select_db("mydatabase");
mysql_query("SET NAMES UTF8");
$strSQL = "SELECT * FROM location ";
$objQuery = mysql_query($strSQL);
$resultArray = array();
while($obResult = mysql_fetch_array($objQuery))
{
array_push($resultArray,$obResult);
}
mysql_close($objConnect);
echo json_encode($resultArray);
?>
อ่านค่า JSON :
โค้ด: เลือกทั้งหมด
$.getJSON( "json.php", function( jsonObj ) {
//*** loop
$.each(jsonObj, function(i, item){
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.LAT, item.LNG),
map: maps,
title: item.LOC_NAME
});
info = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
info.setContent(item.LOC_NAME);
info.open(maps, marker);
}
})(marker, i));
}); // loop
});
- Jquery & Ajax Knowledge-1.png (126.42 KiB) Viewed 37314 times
ตัวอย่างด้านบน คือการปักหมุดแบบหลายตำแหน่ง ถ้าหากต้องการดูวิธีการปักหมุดเพียงจุดเดียวสามารถดูได้ที่
การปักหมุด (Marker) อ้างอิงจาก Lat,Lon
นอกจาก Google Map ที่ทำได้แล้วเรายังสามารถใช้ openstreetmap แทน Google ก็ได้นะ ดูต่อตามลิงค์ด้านล่าง
https://www.mindphp.com/developer/openstreetmap.html
วิธีการปัดหมุด บน Google Maps API โดยการดึงค่า Latitude และ Longitude มาจากฐานข้อมูล [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-phpmyadmin/2517-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%95%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%87-create-table-mysql.html]MySQL[/url]ด้วยการใช้ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2127-php-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]PHP[/url] เป็นอีกวิธีหนึ่งที่เหมาะสำหรับการปักหมุดหลาย ๆ ตำแหน่ง เพราะจะมีการเก็บค่าตำแหน่งต่าง ๆ ไว้ในฐานข้อมูล หากเราต้องการเพิ่มหรือลบตำแหน่งก็สามารถทำในฐานข้อมูลได้เลย
[b]สร้างฐานข้อมูล ใน MySQL :[/b]
[code]CREATE TABLE `location` (
`LOC_ID` int(10) NOT NULL auto_increment,
`LOC_NAME` varchar(250) NOT NULL,
`LAT` varchar(50) NOT NULL,
`LNG` varchar(50) NOT NULL,
PRIMARY KEY (`LOC_ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
INSERT INTO `location` VALUES (1, 'Test1', '13.836760', '100.582560');
INSERT INTO `location` VALUES (2, 'Test2', '13.836328', '100.582123');
INSERT INTO `location` VALUES (3,'Test3', '13.837205', '100.581205');[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jul03_595a29012e26f[/img]
[b]json.php :[/b]
[code]<?php
header('Content-Type: application/json');
$objConnect = mysql_connect("localhost","root","root");
$objDB = mysql_select_db("mydatabase");
mysql_query("SET NAMES UTF8");
$strSQL = "SELECT * FROM location ";
$objQuery = mysql_query($strSQL);
$resultArray = array();
while($obResult = mysql_fetch_array($objQuery))
{
array_push($resultArray,$obResult);
}
mysql_close($objConnect);
echo json_encode($resultArray);
?>[/code]
[b]อ่านค่า JSON :[/b]
[code]$.getJSON( "json.php", function( jsonObj ) {
//*** loop
$.each(jsonObj, function(i, item){
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.LAT, item.LNG),
map: maps,
title: item.LOC_NAME
});
info = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
info.setContent(item.LOC_NAME);
info.open(maps, marker);
}
})(marker, i));
}); // loop
});[/code]
[img]http://snap.mindphp.com/index.php?view=2017Jul03_595a291f33995[/img]
[attachment=0]Jquery & Ajax Knowledge-1.png[/attachment]
ตัวอย่างด้านบน คือการปักหมุดแบบหลายตำแหน่ง ถ้าหากต้องการดูวิธีการปักหมุดเพียงจุดเดียวสามารถดูได้ที่ [url=https://www.mindphp.com/forums/viewtopic.php?f=79&t=40878]การปักหมุด (Marker) อ้างอิงจาก Lat,Lon [/url]
นอกจาก Google Map ที่ทำได้แล้วเรายังสามารถใช้ openstreetmap แทน Google ก็ได้นะ ดูต่อตามลิงค์ด้านล่าง
https://www.mindphp.com/developer/openstreetmap.html