Question

我有两个选择按钮，具有纬度和经度值。问题是当我选择一个选项时找不到位置。如何通过使用纬度和经度自由显示方向？我使用PHP来显示纬度和长度的位置。

我的代码：

<div id="distance-panel">
                    <h3>Start: </h3>
                    <select id="start">
                        <?php
                            include "connect.php";

                            $sql = "SELECT * FROM tblLocation";
                            $result = mysqli_query($conn, $sql);

                            while($row = mysqli_fetch_array($result)){
                                echo "
                                    <option value='{lat:".$row['latitude'].",lng:".$row['longitude']."}'>".$row['branch']."</option>
                                ";
                            }
                            mysqli_close($conn);
                        ?>
                    </select>
                    <h3>End: </h3>
                    <select id="end">
                        <?php
                            include "connect.php";

                            $sql = "SELECT * FROM tblLocation";
                            $result = mysqli_query($conn, $sql);

                            while($row = mysqli_fetch_array($result)){
                                echo "
                                    <option value='{lat:".$row['latitude'].",lng:".$row['longitude']."}'>".$row['branch']."</option>
                                ";
                            }
                            mysqli_close($conn);
                        ?>
                    </select>
                </div>
                <div id="distance-map"></div>
                <script>
                          function initMap() {
                            var directionsService = new google.maps.DirectionsService;
                            var uluru = {lat: 13, lng: 122};
                            var directionsDisplay = new google.maps.DirectionsRenderer;
                            var map = new google.maps.Map(document.getElementById('distance-map'), {
                              zoom: 5.2,
                              center: uluru
                            });
                            directionsDisplay.setMap(map);

                            var onChangeHandler = function() {
                              calculateAndDisplayRoute(directionsService, directionsDisplay);
                            };
                            document.getElementById('start').addEventListener('change', onChangeHandler);
                            document.getElementById('end').addEventListener('change', onChangeHandler);
                          }

                          function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                            directionsService.route({
                              origin: document.getElementById('start').value,
                              destination: document.getElementById('end').value,
                              travelMode: 'DRIVING'
                            }, function(response, status) {
                              if (status === 'OK') {
                                directionsDisplay.setDirections(response);
                              } else {
                                window.alert('Directions request failed due to ' + status);
                              }
                            });
                          }
                    </script>
                    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDd03Su-LQGB3ZVB3MvP1a3q01lrgAvqlE&callback=initMap"></script>

Answer 1

路线接受41.878114,-87.629798等字符串作为原点和目的地。他们不必像{lat:41.878114,lng:-87.629798}这样的对象。

因此，您只需将PHP代码更改为：

while($row = mysqli_fetch_array($result)){
echo "
<option value='".$row['latitude'].",".$row['longitude']."'>".$row['branch']."</option>
"; //<option value='41.878114,-87.629798'>Chicago</option>
}

这就是全部。：d

以下是仅使用字符串版本的工作示例：http://jsbin.com/cucuzin/edit?html,css,js,output

（请注意，我使用了您在问题中提供的相同JS代码并且它正在运行）

Answer 2

拆分值并将每个值转换为浮动。

var start = document.getElementById('start').value;
var o_split = start.split(',');
var o_lat = parseFloat(o_split[0]);
var o_lng = parseFloat(o_split[1]);

var end  = document.getElementById('end').value;
var d_split = end.split(',');
var d_lat = parseFloat(d_split[0]);
var d_lng = parseFloat(d_split[1]);

将原点和目的地更改为，

 origin: {lat: o_lat,lng: o_lng},
 destination:  {lat: d_lat,lng: d_lng},

未找到Google Map Direction Service位置

2 个答案: