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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!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

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

 ความคิดเห็นที่ 1
ดูเนื้อหานี้เป็นแนวทาง

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


ninenik 09-11-2017
 ความคิดเห็นที่ 2

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



zzz12345 09-11-2017 19:56







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ