|
|
|
[แนะนำ] วิธีการหาชื่อสถานที่จาก lat และ lng โดยการ Reverse Geocoding |
|
|
|
|
|
|
|
เยี่ยมครับ
|
|
|
|
|
Date :
2012-10-18 22:00:21 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ความจริง google มี WS ให้หลายตัวครับ แต่จะจำกัด Connection ต่อ 1 Key
1. place search
2. geocode search
3. transit search
4. text search
อาจจะมีเยอะกว่านี้ แต่เคยใช้ก็มีเท่านี้ แต่ละตัว พอค้นหาได้แล้วสามารถ เจาะลึกลงไปได้อีก
ตย. place/json?location=x,y
ได้ค่ามาแล้ว นำไปขยายผลต่อ
place/details/json?reference=refer_id
ถ้าจะให้ดี ใช้ Javascript หรือ ใน Map API เอาครับ แล้วค่อยส่งไป PHP จะเร็วกว่า
หรือถ้าดึงข้อมูลเยอะๆ ผมจะรัน PHP ผ่าย Command prom 1ครับ
เพราะผมดึงข้อมูลจาก PHP นานพอควรอาจ จะเป็นเพราะเครื่อง Notebook และเน็ตด้วย
อันนี้ดึงข้อมูลจากหลายที่ครับ ไม่ได้เจาะจงเฉพาะ Google เพราะ ข้อมูลบางอย่างน้อยเกินไป
http://12go.asia/
http://www.one2go.asia/ # อันนี้ยังไม่แก้ Bug ครับ โทดที ที่ไม่ 100%
|
ประวัติการแก้ไข 2012-10-19 00:22:26
|
|
|
|
Date :
2012-10-19 00:18:12 |
By :
t-monroe |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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" />
<title>Google Map API 3 - 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:450px;
height:500px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
//setInterval("initialize();",30000);
//setTimeout("initialize();",30000);
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(18.79217,99.02711);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 7, // กำหนดขนาดการ 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
$.ajax({
url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
success:function(xml){
$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLatLng=new GGM.LatLng(markerLat,markerLng);
var my_Marker = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// console.log($(this).find("id").text());
});
}
});
}
$(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>
<button onclick="sendRequest()">Try it</button>
</body>
</html>
คือผมอยากให้มัน Refresh แค่ตรงช่วงที่เรียก Marker อะครับไม่ทราบว่าต้องทำไงเหรอครับ
|
|
|
|
|
Date :
2012-10-19 02:46:15 |
By :
numton |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
พี่ t-monroe พอมี code ตัวอย่างรึเปล่าครับ ผมงงมาก ๆ เลย
รบกวนด้วยนะครับ
|
|
|
|
|
Date :
2012-10-20 17:11:27 |
By :
numton |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (JavaScript)
var data;
var stateAcc;
var start = new google.maps.LatLng(13.00,99.00)
var mapOptions;
var map;
var mapdata = [];
var marker;
var markersArray = [];
var directionsRenderer;
var directionsData = new Array();
var path = new Array();
var directionsService;
var infowindow;
var flightPath;
var wps;
function setMapData(mdata,mapdata,type) {
//clearDirection();
//deleteOverlays();
//try{
var mapBound = new google.maps.LatLngBounds();
var id,i;
if(mapdata && type){
deleteOverlays();
for(var j=0; j< mapdata.length; j++){
for (i = 0; i < mapdata[j].length; i++) {
if(mapdata[j][i]['type'] == type){
var point = new google.maps.LatLng(mapdata[j][i]['lat'],mapdata[j][i]['lng']);
mapBound.extend(point);
var mk = addMarker(point,mapdata[j][i]['name'],mapdata[j][i]['type'],mapdata[j][i]['ico']);
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(mk, 'click', (function(mk,j, i) {
return function() {
var content = '<table><tr>';
if(mapdata[j][i]['type'] != "hotel"){
content += '<td rowspan="2"><img src="" id="window'+[j][i]+'" align="left" width="100" border="1"></td>';
getThumb('window'+[j][i],mapdata[j][i]['name']);
}else
content += '<td rowspan="2"><img src="'+mapdata[j][i]['thumb']+'" align="left" width="100" border="1"> </td>';
content += '<td><b>'+mapdata[j][i]['name']+'</b></td></tr>';
content += '<tr><td>Lat : '+mapdata[j][i]['lat']+' , Lng: '+mapdata[j][i]['lng']+'</td></tr>';
content += '</table>';
infowindow.setContent(content);
infowindow.open(map, mk);
}
})(mk,j, i));
//infowindow.open(map, mk);
}
}
}
reCentre();
}
if(mdata){
var cc = mdata.length;
var name;
for(i=0;i<cc;i++){
var mpath = [];
var mark = new Array();
//7777777console.log('Route : '+i+' ---------');
name = [];
var prop = null;
id = [];
var ok = new Array();
if(mdata[i].type == 'bus'){
for(prop in mdata[i]){
if(prop != 'type' && mdata[i][prop].lat != '' && mdata[i][prop].lng != ''){
//console.log('[Bus] '+mdata[i][prop].name+' LatLng : '+mdata[i][prop].lat+','+mdata[i][prop].lng);
name.push(mdata[i][prop].name);
id.push(mdata[i][prop].id);
mpath.push({
location:new google.maps.LatLng(mdata[i][prop].lat,mdata[i][prop].lng),
stopover:true
});
if(!type)
mapBound.extend(new google.maps.LatLng(mdata[i][prop].lat,mdata[i][prop].lng));
ok[prop] = true;
}
}
}else{
mark[0] = mdata[i][0].name;//mdata[i][0].name;
//mark[1] = 'xxxxx';//mdata[i][prop].name;
prop = null;
for(prop in mdata[i]){
mark[1] = mdata[i][prop].name;
if(prop != 'type' && mdata[i][prop].lat != "" && mdata[i][prop].lng != ""){
//console.log('[Poly] : '+mdata[i][prop].name+' LatLng : '+mdata[i][prop].lat+','+mdata[i][prop].lng);
mpath.push(new google.maps.LatLng(mdata[i][prop].lat,mdata[i][prop].lng));
if(!type)
mapBound.extend(new google.maps.LatLng(mdata[i][prop].lat,mdata[i][prop].lng));
ok[prop] = true;
}
}
}
if(ok.length > 1){
if(mdata[i].type == 'bus'){
requestDirections(mpath,id,name);
}else if(mdata[i].type == 'train'){
railway(mpath,mark);
}else{
flight(mpath,mark);
}
}
//console.log('!Obj-len : '+path.length);
}
}
if(map){
map.fitBounds(mapBound);
}
/*
}catch(err){
var caller_line = err.stack.split("\n")[4];
var index = caller_line.indexOf("at ");
txt="----------------- Error --------------------\n\n";
txt+="There was an error on this page!!!\n";
txt+="[Message]: setMapData() , " + err.message + "\n";
txt+="[Line]: "+caller_line+"\n";
txt+="[Index]: "+index+"\n\n";
txt+="--------------------------------------------";
//txt+="Click OK to continue.\n\n";
//alert(txt);
console.log(txt);
}
*/
}
function reCentre(lat,lng) {
if(!lat){
var lat = $('#txt-description-lat').val();
var lng = $('#txt-description-lng').val();
}
var newcentre = new google.maps.LatLng(lat,lng);
map.setCenter(newcentre);
}
function addMarker(location,name,type,icon) {
//if(location){
var marker = new google.maps.Marker({
position: location,
map: map,
title:name
});
if(name){
if(name.search('resort') > 0 || name.search('Resort') > 0)
marker.setIcon('/medias/icons/resort.png');
else if(name.search('hotel') > 0 || name.search('Hotel') > 0 || type == 'hotel'){
marker.setIcon('/medias/icons/hotel.png');
}else
marker.setIcon(icon);
}
markersArray.push(marker);
return marker;
//}
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function clearDirection(){
if(path.length){
mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("show-minimap"),mapOptions);
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
function placeinMap(placeid,trip){
if(!map){
startMap(2);
}
clearDirection();
deleteOverlays();
$.get("/map.request.php",
{
placeid: placeid,
tripid:trip,
lang:$('txt-lang').val()
},function(data){
//alert(data);
var mapBound = new google.maps.LatLngBounds();
var dt = $.parseJSON(data);
var mark = new Array();
for(var i in dt){
//console.log(dt[i]);
if(dt[i].data_type == 'trip'){
var j;
var mpath = [];
var name = [];
if(dt[i].type == 'Bus'){
j = null;
for(j in dt[i].location){
mpath.push({
location:new google.maps.LatLng(dt[i].location[j].lat,dt[i].location[j].lng),
stopover:true
});
name.push(dt[i].location[j].station);
//console.log(dt[i].location[j].lat+', '+dt[i].location[j].lng);
mapBound.extend(new google.maps.LatLng(dt[i].location[j].lat,dt[i].location[j].lng));
}
}else{
//console.log(dt[i].location[0].station);
mark[0] = dt[i].location[0].station;
//alert(mark[0]);
//mark[1] = dt[i].location[dt[i].location.length - 1].station;
j = null;
for(j in dt[i].location){
mark[1] = dt[i].location[j].station;
mpath.push(new google.maps.LatLng(dt[i].location[j].lat,dt[i].location[j].lng));
mapBound.extend(new google.maps.LatLng(dt[i].location[j].lat,dt[i].location[j].lng));
}
}
if(dt[i].type == 'Bus'){
requestDirections(mpath,null,name);
}else if(dt[i].type == 'Train'){
railway(mpath,mark);
}else{
flight(mpath,mark);
}
}else{
if(dt[i].lat && dt[i].lng){
var location = new google.maps.LatLng(dt[i].lat,dt[i].lng);
var mk = addMarker(location,dt[i].name,dt[i].data_type);
mapBound.extend(location);
}
}
}
map.fitBounds(mapBound);
});
}
function mapInfo(msg){
$('#map-message').html(msg);
$('#map-message').fadeIn(500).delay(1000);
$('#map-message').fadeOut(800);
}
//---------------------------- Deletes all markers in the array by removing references to them
function requestDirections(waypoint,id,name) {
try{
wps = waypoint;
infowindow = new google.maps.InfoWindow();
if(waypoint.length > 0){
directionsService.route({
origin: waypoint[0].location,
destination: waypoint[waypoint.length-1].location,
waypoints:waypoint,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result) {
if(!result)
return;
for(i in waypoint){
if(waypoint[i]){
marker = new google.maps.Marker({
position:waypoint[i].location,
map: map
});
if(name){
marker.setIcon('/medias/icons/1349336518_school_bus.png');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var content = '<table><tr>';
content += '<td><b>Station : '+name[i]+'</b></td></tr>';
content += '</table>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
//if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.polylineOptions = {
strokeColor:'#0000FF',
strokeOpacity:0.6,
strokeWeight:3
};
directionsRenderer.preserveViewport = true;
directionsRenderer.setDirections(result);
directionsRenderer.setMap(map);
//console.log(result);
// }else{
// alert('Not support...');
// }
});
}else{
directionsRenderer.setMap([]);
}
}catch(err){
var caller_line = err.stack.split("\n")[4];
var index = caller_line.indexOf("at ");
txt="----------------- Error --------------------\n\n";
txt+="There was an error on this page!!!\n";
txt+="[Message]: requestDirections() , " + err.message + "\n";
txt+="[Line]: "+caller_line+"\n";
txt+="[Index]: "+index+"\n\n";
txt+="--------------------------------------------";
//txt+="Click OK to continue.\n\n";
//alert(txt);
//console.log(txt);
}
}
function flight(hops,mark) {
try{
infowindow = new google.maps.InfoWindow();
if(!hops){
hops = [];
}
flightPath = new google.maps.Polyline({
path: hops,
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 2
});
marker = new google.maps.Marker({
position: hops[0],
map: map,
title:mark[0]
});
marker.setIcon('/medias/icons/1349169155_Black_Plane.png');
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
var content = '<table><tr>';
content += '<td><b>Station : '+mark[0]+'</b></td></tr>';
content += '</table>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
marker = new google.maps.Marker({
position: hops[hops.length -1],
map: map,
title:mark[1]
});
marker.setIcon('/medias/icons/1349169155_Black_Plane.png');
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
var content = '<table><tr>';
content += '<td><b>Airport : '+mark[1]+'</b></td></tr>';
content += '</table>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
flightPath.setMap(map);
marker.setIcon('/medias/icons/1349169155_Black_Plane.png');
}catch(err){
var caller_line = err.stack.split("\n")[4];
var index = caller_line.indexOf("at ");
txt="----------------- Error --------------------\n\n";
txt+="There was an error on this page!!!\n";
txt+="[Message]: flight() ," + err.message + "\n";
txt+="[Line]: "+caller_line+"\n";
txt+="[Index]: "+index+"\n\n";
txt+="--------------------------------------------";
//txt+="Click OK to continue.\n\n";
//alert(txt);
console.log(txt);
}
}
function railway(hops,mark) {
try{
if(!hops){
hops = [];
}
flightPath = new google.maps.Polyline({
path: hops,
strokeColor: '#0B4C5F',
strokeOpacity: 0.5,
strokeWeight: 2
});
marker = new google.maps.Marker({
position: hops[0],
map: map,
title:mark[0]
});
marker.setIcon('/medias/icons/train.png');
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
var content = '<table><tr>';
content += '<td><b>Station : '+mark[0]+'</b></td></tr>';
content += '</table>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
marker = new google.maps.Marker({
position: hops[hops.length -1],
map: map,
title:mark[1]
});
marker.setIcon('/medias/icons/train.png');
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
var content = '<table><tr>';
content += '<td><b>Station : '+mark[1]+'</b></td></tr>';
content += '</table>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
flightPath.setMap(map);
marker.setIcon('/medias/icons/train.png');
}catch(err){
var caller_line = err.stack.split("\n")[4];
var index = caller_line.indexOf("at ");
txt="----------------- Error --------------------\n\n";
txt+="There was an error on this page!!!\n";
txt+="[Message]: railway() , " + err.message + "\n";
txt+="[Line]: "+caller_line+"\n";
txt+="[Index]: "+index+"\n\n";
txt+="--------------------------------------------";
//txt+="Click OK to continue.\n\n";
//alert(txt);
console.log(txt);
}
}
/*
$('.pagination ul li a').tooltip('hide');
$('element').tooltip({placement:'right'});
*/
function startMap(zoom) {
var z;
if(zoom)
z = zoom;
else
z = 2;
mapOptions = {
zoom: z,
center: start,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$('#show-minimap').addClass('minimap');
map = new google.maps.Map(document.getElementById("show-minimap"),mapOptions);
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
}
function currentLocation(lat,lng){
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map-alt"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setIcon("/medias/images/3126566361288163613.png");
marker.draggable = false;
}
ลองแกะดูครับ... มันใช้ได้ครับ
ผมกำลัง0tแก้ให้มันยืดหยุดกว่านี้อยู่... ไม่ค่อยมีเวลากลับมาดู โค้ดชุดนี้เท่าไหร่
|
|
|
|
|
Date :
2012-10-22 01:50:50 |
By :
t-monroe |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 02
|