ถามเรื่องการสร้างตัวแปลที่ระบุตำแหน่งปัจจุบันของเราและนำตัวแปลนั้นมาใช้ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถามเรื่องการสร้างตัวแปลที่ระบุตำแหน่งปัจจุบันของเราและนำตัวแปลนั้นมาใช้ครับ

สวัสดีครับ ผมทำโปรเจคเรื่องการบอกระจากทางจากหลายๆที่โดยเอาตำแหน่งของเราเป็นศูนย์กลางอยู่ครับ

ปัญหาที่ 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 08-11-2017 23:07:29

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ดูเนื้อหานี้เป็นแนวทาง

หาระยะทางจากตำแหน่งปัจจุบันกับสถานที่ใน google map ด้วย Distance Matrix http://niik.in/832

https://www.ninenik.com/content.php?arti_id=832 via @ninenik

ninenik 09-11-2017

ความคิดเห็นที่ 2

ขอบคุณ @ Ninenik มาก ๆ เลยครับ
เป็นแบบที่ต้องการเลย เดี๋ยวจะลองนำไปประยุคใช้ดูครับ ขอบคุณมาก ๆ ครับ

zzz12345 09-11-2017 19:56

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน