PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery

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

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

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

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

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

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

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

Pass

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

( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )

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

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

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

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

Ninenik 14.207.62.xxx 09-11-2017

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

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

Zzz12345 223.207.20.xxx 09-11-2017 19:56