ถามเกี่ยวกับ google map ครับ ในเรื่องของรัศมี แต่ ค่า ลองติจูด และ ละติจูต
หรือ ก็คือการหาระยะทาง ระหว่างจุด สองจุด ว่าเกินรัศมี ที่ต้องการมั๊ย (แต่ไม่ใช่ระยะจริงบนถนนน่ะ เป็นระยะบนอากาศมั่ง)var targetLat=marker.getPosition().lat();
var targetLng=marker.getPosition().lng();
var targetLoc = new GLatLng(targetLat,targetLng);
var center= new GLatLng(centerLat, centerLng);
var distanceInkm=center.distanceFrom(targetLoc) / 1000;
if(distanceInkm < radius){
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Date :
2013-03-10 05:17:04By :
ccjpn
เว็บเข้าไม่ได้อะครับ
ประวัติการแก้ไข
Date :
2013-03-10 09:16:13By :
copsychus
ไม่มี error ครับ แต่ไม่มีอะไรขึ้นเลย ว่างเปล่าๆ ผมใช้เป็นแบบนี้น่ะครับCode (PHP) <body onload=mapa()>
<div id="mapdiv" style="width:100%; height:500px;"></div>
<div class="eventtext">
<div>Lattitude: <span id="latspan"></span></div>
<div>Longitude: <span id="lngspan"></span></div>
<div>Lat Lng: <span id="latlong"></span></div>
<div>Lat Lng on click:
<input type="text" id="latlongclicked" name="latlongclicked" style="width:200px; border:1px inset gray;">
<input type="text" id="lnglongclicked" name="lnglongclicked" style="width:200px; border:1px inset gray;"></span></div>
</div>
</div>
<script type="text/javascript">
var map=null;
function mapa()
{
var locations = [
['Assumption University', 113.75404, 100.62770, '../images/university.png', 1],
];
var map = new google.maps.Map(document.getElementById('mapdiv'), {
zoom: 15,
center: new google.maps.LatLng(13.75404,100.62770),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create Map
//map = new google.maps.Map(document.getElementById('mapdiv'),opts);
//var opts = {'center': new google.maps.LatLng(13.75404,100.62770), 'zoom':15, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
//Marker
var infowindow = new google.maps.InfoWindow();
var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
//Get longtitude and latitude onclick
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latlongclicked').value = event.latLng.lat()
document.getElementById('lnglongclicked').value = event.latLng.lng()
});
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latspan').innerHTML = event.latLng.lat()
document.getElementById('lngspan').innerHTML = event.latLng.lng()
document.getElementById('latlong').innerHTML = event.latLng.lat() + ', ' + event.latLng.lng()
});
}
</script>
ประวัติการแก้ไข
Date :
2013-03-11 00:26:02By :
copsychus
ใส่แล้วครับ อันบนผมแค่ตัดต่อ บางส่วนมาน่ะครับ ไม่งั้่นมันจะยาวเกินๆ
Date :
2013-03-11 23:54:31By :
copsychus
ผมก็ว่า ถ้าทำเีรื่อง Map อย่าตัดโค้ดเลยครับ Code (PHP) <!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="mapdiv" style="width:100%; height:500px;"></div>
<div class="eventtext">
<div>Lattitude: <span id="latspan"></span></div>
<div>Longitude: <span id="lngspan"></span></div>
<div>Lat Lng: <span id="latlong"></span></div>
<div>Lat Lng on click:
<input type="text" id="latlongclicked" name="latlongclicked" style="width:200px; border:1px inset gray;">
<input type="text" id="lnglongclicked" name="lnglongclicked" style="width:200px; border:1px inset gray;"></span></div>
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map=null;
function mapa()
{
var locations = [
['Assumption University', 113.75404, 100.62770, '../images/university.png', 1],
];
var map = new google.maps.Map(document.getElementById('mapdiv'), {
zoom: 15,
center: new google.maps.LatLng(13.75404,100.62770),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create Map
//map = new google.maps.Map(document.getElementById('mapdiv'),opts);
//var opts = {'center': new google.maps.LatLng(13.75404,100.62770), 'zoom':15, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
//Marker
var infowindow = new google.maps.InfoWindow();
var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
//Get longtitude and latitude onclick
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latlongclicked').value = event.latLng.lat()
document.getElementById('lnglongclicked').value = event.latLng.lng()
});
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latspan').innerHTML = event.latLng.lat()
document.getElementById('lngspan').innerHTML = event.latLng.lng()
document.getElementById('latlong').innerHTML = event.latLng.lat() + ', ' + event.latLng.lng()
});
}
window.onload = mapa;
</script>
</body>
</html>
Date :
2013-03-12 03:37:20By :
deawx
แบบด้านบน ผมทำได้อยู่แล้วครับ แล้วผมทำตัว cover วงกลมเป็น ตัว radius นับจากจุดศูนย์กลางเพิ่มเป็น แต่คือ จะเอา จุด latitude และ longtitude ที่กด คลิกบนแมพ ไปนับ 5 km จาก จุดศูนย์กลาง อันนี้ไม่เข้าใจครับ ว่ามันทำงานยังไง มันจะเทียบยังไงหรอครับ ให้รู้ว่า จุดที่กด กับ จุดตรงกลาง ห่างกัน 5 กิโลเมตร โดยประมาณ ถ้าเอา longtitude ที่กด กับ longtitude ของจุดศูนย์กลาง มาเทียบกัน และเอาคำตอบมา วัดตัวเลข ไม่เกินเท่าไหร่ ถึง เท่าไหร่ มันเป็นแบบนี้หรอครับ
Date :
2013-03-12 16:57:40By :
copsychus
ดันเล็กน้อยงับ
Date :
2013-03-12 21:01:34By :
copsychus
พอดีได้ marker กับ เก็บ long lat แล้วครับ แต่ไม่มีไอเดดีย จะสร้าง รัศมี ขึ้นมาคลอบคลุม จุดศูนยืกลางดังกล้าว และ เทียบ แต่ละจุดห้ามเกินจากรัศมี 5km ยังไงน่ะครับ
Date :
2013-03-15 10:32:47By :
copsychus
//หาระยะทางระหว่างจุดศูนย์กลางกับจุดที่คลิก (ไม่ต้องสนใจเส้นของวงกลม อาศัยหลักคณิตศาสตร์)
Date :
2013-03-16 07:23:49By :
ccjpn
ผมเจออันนี้ครับ ใช้ใน Googlemap v3 แต่ไม่รู้ว่าใช้ยังไง งง http://studiowhiz.com/2010/10/02/google-maps-v3-distancefrom/Code (PHP) if(distanceInMeters < 5000){
// To save data ถ้าค่าน้อยกว่า 5000 M (5 KM) ให้ทำอะไรต่อ
alert('Out of reached, try again');
}else{
alert('Correct');
}
});
ประวัติการแก้ไข
Date :
2013-03-16 19:02:30By :
copsychus
1.ถามหน่อยครับ ตัวCode (PHP) <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false&v=3&libraries=geometry"></script>
<script type="text/javascript">
function initialize(){
var abac =new google.maps.LatLng(13.755288,100.627704);
var mapProp = {
center:abac,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapdiv"),mapProp);
var myCity = new google.maps.Circle({
center:abac,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
/*
var map = new google.maps.Map(document.getElementById('mapdiv'), {
zoom: 15,
center: new google.maps.LatLng(13.755288,100.627704),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
*/
var locations = [
['Assumption University', 13.755288, 100.627704, '../images/university.png', 1],
];
var infowindow = new google.maps.InfoWindow();
var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
google.maps.event.addListener(map,'click',function(event) {
var targetLat=event.latLng.lat();
var targetLng=event.latLng.lng();
document.getElementById('latlongclicked').value = targetLat;
document.getElementById('lnglongclicked').value = targetLng;
var targetLat2 = targetLat;
var targetLng2 = targetLng;
var targetLoc = new google.maps.LatLng(targetLat2,targetLng2);
//document.getElementById('result').value = targetLoc;
var centerLat = 13.755288;
var centerLng = 100.627704;
var centerLoc = new google.maps.LatLng(centerLat,centerLng);
var b = google.maps.geometry.spherical.computeDistanceBetween(centerLoc, targetLoc, 0.000784806152880 );
document.getElementById('result').value = b;
});
}
/*
function mapa()
{
var locations = [
['Assumption University', 13.753704, 100.6278880, '../images/university.png', 1],
];
var map = new google.maps.Map(document.getElementById('mapdiv'), {
zoom: 15,
center: new google.maps.LatLng(13.753704,100.6278880),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// Create Map
//map = new google.maps.Map(document.getElementById('mapdiv'),opts);
//var opts = {'center': new google.maps.LatLng(13.75404,100.62770), 'zoom':15, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
/*
var infowindow = new google.maps.InfoWindow();
var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
/*
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latlongclicked').value = event.latLng.lat()
document.getElementById('lnglongclicked').value = event.latLng.lng()
});
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latspan').innerHTML = event.latLng.lat()
document.getElementById('lngspan').innerHTML = event.latLng.lng()
document.getElementById('latlong').innerHTML = event.latLng.lat() + ', ' + event.latLng.lng()
});
google.maps.event.addListener(map,'click',function(event) {
var targetLat=event.latLng.lat();
var targetLng=event.latLng.lng();
document.getElementById('latlongclicked').value = targetLat
document.getElementById('lnglongclicked').value = targetLng;
});
var targetLat = document.getElementById('latlongclicked').value;
var targetLng = document.getElementById('lnglongclicked').value;
var targetLoc = new GLatLng(targetLat,targetLng); //จุดที่มาจากการคลิก
var centerLat = 13.753704;
var centerLng = 100.6278880;
var center= new GLatLng(centerLat, centerLng); //อันนี้คือจุดกึ่งกลาง
var targetLat = document.getElementById('latlongclicked').value;
var targetLng = document.getElementById('lnglongclicked').value;
//หาระยะทางระหว่างจุดศูนย์กลางกับจุดที่คลิก (ไม่ต้องสนใจเส้นของวงกลม อาศัยหลักคณิตศาสตร์)
var distanceInMeters = targetLoc.distanceFrom(center);
if(distanceInMeters < 5000){
// To save data ถ้าค่าน้อยกว่า 5000 M (5 KM) ให้ทำอะไรต่อ
document.getElementById('latlongclicked').value = 'out of reached';
}else{
document.getElementById('latlongclicked').value = 'completed';
}
};
*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div style="width:70%; margin:0px auto;">
<div id="mapdiv" style="width:100%; height:500px;"></div>
<div class="eventtext">
<div>Lattitude: <span id="latspan"></span></div>
<div>Longitude: <span id="lngspan"></span></div>
<div>Lat Lng: <span id="latlong"></span></div>
<div>Lat Lng on click:
<input type="text" id="latlongclicked" name="latlongclicked" style="width:200px; border:1px inset gray;">
<input type="text" id="lnglongclicked" name="lnglongclicked" style="width:200px; border:1px inset gray;"></span>
<input type="text" id="result" name="result" style="width:200px; border:1px inset gray;"></span></div>
</div>
</div>
</body>
</html>
</html>
ประวัติการแก้ไข
Date :
2013-03-17 12:51:23By :
copsychus
เสร็จแล้วครับ ได้หมดละ ขอบคุณที่ช่วยเหลือนะครับ
Date :
2013-03-17 19:25:03By :
copsychus
ขอศึกษาโค้ดที่ได้หน่อยได้ไหมครับ
Date :
2013-03-20 18:02:09By :
นศ มทร
รบกวนขอ ศึกษาโค้ดที่เสร็จแล้ว ได้มั้ยครับ
Date :
2013-03-25 13:17:43By :
นักศึกษา ป.ตรี ปี4
โทดทีครั บพอดีเพิ่งเห็น . . มัวแต่เตรียมงาน present เมื่อวานซึน.Code (PHP) <?php
session_start();
ob_start();
session_write_close();
ob_end_flush();
?>
<!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 name="verify-v1" content="vgOFxxPwid3SAArpRHIink/4XzKerR6zKyGmiGfPYzU=" />
<title>LetApartment :: List of apartment, service apartment, condominium, condo, house for rent and for sale. Real estate agent service & Investment Consultant Service.</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../site.images/bg/bg.gif);
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #03F;
}
a:active {
text-decoration: none;
color: #000;
}
</style>
<script src="../jquery/lightbox/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false&v=3&libraries=geometry"></script>
</head>
<script type="text/javascript">
var markersArray = [];
var abac =new google.maps.LatLng(13.755288,100.627704);
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
function initialize(){
var mapProp = {
center:abac,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googlediv"),mapProp);
var myCity = new google.maps.Circle({
center:abac,
clickable: false,
radius:5000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
var locations = [
['<div align="left"><b>Assumption University</b> <br/> Soi Ramkhamhaeng 24 (Mu Ban Seri) <br/> Bang Kapi, Bangkok, Thailand </div> <br/> <img src="../images/assumption.png" height="110" width="250" />', 13.755288, 100.627704, '../images/university.png', 1],
['<div align="left"><b>Big C Ramkhamhaeng Supertore</b> <br/> Hua Mak, Bang Kapi, Bangkok 10240, Thailand <br/> <img src="../images/bus.png" /> 22,40,58,60,71,92,93,99,109,113 <br/> <img src="../images/bigc.png" height="110" width="167" /></div>', 13.755893, 100.612856, '../images/department.png', 1],
['<div align="left"><b>The Mall Shopping Center Ramkhamhaeng</b> <br/> 1988/2 Soi Udom Yot <br/> Hua Mak, Bang Kapi, Bangkok <br/> 10250, Thailand 02-310-1000 <br/> <img src="../images/themall.png" height="110" width="167" /> </div>', 13.751818, 100.610507, '../images/department.png', 1],
['<div align="left"><b>Ratcha Mangkala National Stadium</b> <br/> Hua Mak, Bang Kapi, Bangkok <br/> 10250, Thailand <br/> <img src="../images/ratcha.png" height="126" width="250" /> </div>', 13.755653, 100.622136, '../images/stadium.png', 1],
['<div align="left"><b>Samitivet Srinakarin Hospital</b> <br/> 3rd Floor 488, Srinakarin Road, <br/> Suan Luang, Bangkok 10250 <br/> Thailand. 02-731-7000. <br/> <img src="../images/samitivet.png" height="142" width="140" /> </div>', 13.748608, 100.638937, '../images/hospital.png', 1],
['<div align="left"><b>Major Cineplex Ramkhamhaeng</b> <br/> Ramkhamhaeng Bang Kapi 10240 <br/> <img src="../images/major.png" height="120" width="160" /> </div>', 13.753709, 100.610727, '../images/theater.png', 1],
['<div align="left"><b>Ramkhamhaeng University Huamak</b> <br/> Ramkhamhaeng Road, Hua Mark, <br/> Bangkapi Bangkok 02-310-8000 <br/> <img src="../images/ramkhamhaenguniver.png" height="115" width="250" /> </div> ', 13.758831, 100.618123, '../images/university2.png', 1],
['<div align="left"><b>The Mall Shopping Center Bangkapi</b> <br/> 3522 Lat Phrao Rd, <br/> Khlong Chan, Bang Kapi <br/> Bangkok, 10240 02-363-3185 <br/> <img src="../images/themallbangkapi.png" height="133" width="250" /> </div> ', 13.766397, 100.642565, '../images/department.png', 1],
['<div align="left"><b>Tesco Lotus Bangkapi</b> <br/> 3109, Lat Phrao Rd, <br/> Khlong Chan, Bang Kapi <br/> Bangkok, 10240 02-730-4444 <br/> <img src="../images/bus.png" /> 8,22,27,73ก,92,95ก,96,122,126,137 <br/> <img src="../images/tesco.png" height="130" width="133" /> </div> ', 13.768841,100.643884, '../images/supermarket.png', 1],
['<div align="left"><b>Ramkhamhaeng Hospital</b> </br> 436 Ramkhamhaeng Road, <br/> Ramkhamhaeng, Bang Kapi <br/> Bangkok 10240, Thailand <br/> 02-743-9999 <br/> <img src="../images/ramkhamhaenghospital.png" height="137" width="250" /> </div>', 13.76054, 100.636307, '../images/hospital.png', 1]
];
var infowindow = new google.maps.InfoWindow();
var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
google.maps.event.addListener(map,'click',function(event) {
clearOverlays();
var targetLat=event.latLng.lat();
var targetLng=event.latLng.lng();
var targetLat2 = targetLat;
var targetLng2 = targetLng;
var targetLoc = new google.maps.LatLng(targetLat2,targetLng2);
//document.getElementById('result').value = targetLoc;
var centerLat = 13.755288;
var centerLng = 100.627704;
var centerLoc = new google.maps.LatLng(centerLat,centerLng);
var myMarker=new google.maps.LatLng(targetLat2,targetLng2);
var marker=new google.maps.Marker({
position:myMarker,
icon: '../images/apartment2.png'
});
markersArray.push(marker);
marker.setMap(map);
var distanceAB = google.maps.geometry.spherical.computeDistanceBetween(centerLoc, targetLoc);
if(distanceAB > 5000){
alert("Error, this position is out of range");
clearOverlays();
}else{
document.getElementById('latlongclicked').value = targetLat;
document.getElementById('lnglongclicked').value = targetLng;
}
});
}
</script>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#mapBorder").hide();
$("#btnGoogle").click(function(){
if($("#hdGoogle").val()==1){
$("#mapBorder").show();
document.getElementById("hdGoogle").value = 0;
initialize();
}else{
$("#mapBorder").hide();
document.getElementById("hdGoogle").value = 1;
}
});
});
</script>
<table>
<tr>
<td scope="col" width="248">Google Maps:</td>
<td scope="col" width="287"><input type="button" name="btnGoogle" id="btnGoogle" value="Click to Google Maps"/></td>
<input type="hidden" name="hdGoggle" id="hdGoogle" value=1 />
</tr>
</table>
<br />
<div id="mapBorder">
<div>Latitude:
<input type="text" id="latlongclicked" name="latlongclicked" readonly="readonly" style="width:200px; border:1px inset gray;" />
Longtitude:
<input type="text" id="lnglongclicked" name="lnglongclicked" readonly="readonly" style="width:200px; border:1px inset gray;" />
</div>
<br /><br />
<div style="width:70%; margin:0px auto;"> </div>
<div align="left" id="googlediv" style="width:100%; height:500px;"></div>
<div class="eventtext"> </div>
</body>
</html>
ประวัติการแก้ไข
Date :
2013-03-29 16:17:34By :
copsychus
Server 02
Load balance : Server 02
