ถามเรื่องการสร้างตัวแปลที่ระบุตำแหน่งปัจจุบันของเราและนำตัวแปลนั้นมาใช้ครับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถามเรื่องการสร้างตัวแปลที่ระบุตำแหน่งปัจจุบันของเราและนำตัวแปลนั้นมาใช้ครับ
ถามเรื่องการสร้างตัวแปลที่ระบุตำแหน่งปัจจุบันของเราและนำตัวแปลนั้นมาใช้ครับ
โดย:
Zzz12345 IP:
171.4.4.xxx วันที่:
08-11-2017 เวลา:
23:07:29
สวัสดีครับ ผมทำโปรเจคเรื่องการบอกระจากทางจากหลายๆที่โดยเอาตำแหน่งของเราเป็นศูนย์กลางอยู่ครับ
ปัญหาที่ 1. ผมไม่สามารถนำตัวแปล ระบุตำแหน่งของเราเองมาใช้ได้ครับ
ปัญหาที่ 2. ผมต้องการให้การแสดงผลเรียงลำดับจากกิโลเมตรที่ใกล้ที่สุดลงมาครับ
<!DOCTYPE html>
<html>
<head>
<title>lines between the nearest destinations showing distance</title>
<meta name="viewport" charset="UTF-8" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:600px; height:500px }
</style>
<!-- need to load the geometry library for calculating distances -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDfcP9GoQAv3ZvgW7LlcszzDuA1MbYl9ho&libraries=geometry&sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var map, i, latLng, marker, polyline, stuDistances,
coords = new google.maps.LatLng(12.481002, 99.963896);
function setMarker(pos) {
var lat = pos.coords.latitude,
lng = pos.coords.longitude;
coords = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
map: map,
position: coords,
title: "Current Position"
});
map.panTo(coords);
}
function error(err) {
alert('ERROR(' + err.code + '): ' + err.message);
}
function initialize() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setMarker, error);
} else {
alert("Your browser does not support the Geolocation API");
}
navigator.geolocation.watchPosition(function (pos) {
var lat = pos.coords.latitude,
lng = pos.coords.longitude;
coords = new google.maps.LatLng(lat, lng);
marker.setPosition(coords);
}, error);
var arrDestinations = [
{title: 'บริษัท กรีนไพน์ จำกัด',lat: 12.570474, lng: 99.957825},
{title: 'ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน',lat: 12.6755735, lng: 99.9487977},
{title: 'บริษัทรุ่งทิพย์คอนกรีต จำกัด',lat: 12.3740072, lng: 99.8326259},
{title: 'ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต',lat: 12.4343182, lng: 99.9467043},
{title: 'บริษัท ปูนซีเมนต์นครหลวง จำกัด(มหาชน)',lat: 11.273043, lng: 99.488970},
{title: 'บริษัทพงศ์พัฒนาคอนกรีต จำกัด',lat: 11.1989883, lng: 99.5036602},
{title: 'โรงงานคอนกรีตผสมเสร็จซีแพค',lat: 12.533803, lng: 99.948434},
{title: 'ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง',lat: 12.5866329, lng: 99.8632228},
{title: 'ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต',lat: 12.434281, lng: 99.948898},
];
var stuHome = {title: 'ตำแหน่งของฉัน'};
var homeLatlng = coords;
var myOptions = {
zoom: 10,
center: coords,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var homeMarker = new google.maps.Marker({
position: homeLatlng,
map: map,
title: stuHome.title
});
$('#tableNeighbours').append(
'<tr>'
+ '<th>Destination</th>'
+ '<th colspan="2">' + stuHome.title + '</th>'
+ '</tr>'
);
for (i = 0; i < arrDestinations.length; i++) {
latLng = new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lng);
marker = new google.maps.Marker({
position: latLng,
map: map,
title: arrDestinations[i].title,
icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
});
// draw lines between each marker and home. these are curved lines, not as the crow flies, i.e. they take into account the curvature of the earth (only noticable on longer distances)
polyline = new google.maps.Polyline({
path: [homeLatlng, latLng],
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 4,
geodesic: true,
map: map
});
// calculate the distance between home and this marker
stuDistances = calculateDistances(homeLatlng, latLng);
$('#tableNeighbours').append(
'<tr>'
+ '<td>' + arrDestinations[i].title + '</td>'
+ '<td>' + stuDistances.km + ' km</td>'
+ '<td>' + stuDistances.miles + ' miles</td>'
+ '</tr>'
);
}
}
function calculateDistances(start,end) {
var stuDistances = {};
stuDistances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end); // distance in metres
stuDistances.km = Math.round(stuDistances.metres / 1000 *10)/10; // distance in km rounded to 1dp
stuDistances.miles = Math.round(stuDistances.metres / 1000 * 0.6214 *10)/10; // distance in miles rounded to 1dp
return stuDistances;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<table id="tableNeighbours" border="1"></table>
</body>
</html>
---อธิบายภาพ---
จุดที่ 1 คือจุดที่โปรแกรมคำนวนให้ว่าจุดนี้คือตำแหน่งของเรา
จุดที่ 2 คือจุดที่เราตั้งเป็นค่าเริ่มต้นไว้
แต่ต้องการให้จุดที่ 2 ไปอยู่ที่จุดที่ 1 จะได้คำนวนระยะทางจากตำแหน่งของเราจริงๆ
รบกวนพี่ๆ ด้วยครับ
โดย:
Zzz12345 IP:
171.4.4.xxx วันที่:
08-11-2017 เวลา:
23:07:29
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
ความคิดเห็นที่
1
ดูเนื้อหานี้เป็นแนวทาง
หาระยะทางจากตำแหน่งปัจจุบันกับสถานที่ใน google map ด้วย Distance Matrix http://niik.in/832
http://www.ninenik.com/content.php?arti_id=832 via @ninenik
โดย:
Ninenik IP:
14.207.62.xxx
วันที่:
09-11-2017
ความคิดเห็นที่
2
ขอบคุณ @ Ninenik มาก ๆ เลยครับ
เป็นแบบที่ต้องการเลย เดี๋ยวจะลองนำไปประยุคใช้ดูครับ ขอบคุณมาก ๆ ครับ
โดย:
Zzz12345 IP:
223.207.20.xxx
วันที่:
09-11-2017
เวลา:
19:56:48