Question

我想将php值用于google地图方向的开始地址和结束地址，而不是下拉列表。我的值来自数据库。

在地图下方的代码正在加载但未显示方向的情况下，我认为问题出在onChangeEvent函数上，我无法将其更改为onload，因为结果是地图未加载；

<div id="floating-panel">
                    <input type="text" id="start" name="start" value="<?php echo $start;?>" />
                    <input type="text" id="end" name="end" value="<?php echo $location; ?>" />
                    </div>
                      <div id="right-panel"></div>
                        <div id="map"></div>
                        <script>
                          function initMap() {
                            var directionsDisplay = new google.maps.DirectionsRenderer;
                            var directionsService = new google.maps.DirectionsService;
                            var map = new google.maps.Map(document.getElementById('map'), {
                              zoom: 7,
                              center: {lat: <?php echo $latitudee; ?>, lng: <?php echo $longitudee; ?>}
                            });
                            directionsDisplay.setMap(map);
                            directionsDisplay.setPanel(document.getElementById('right-panel'));

                            var control = document.getElementById('floating-panel');
                            control.style.display = 'block';
                            map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);


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


                          }

                          function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                            var start = document.getElementById('start').value;
                            var end = document.getElementById('end').value;;
                            directionsService.route({
                              origin: start,
                              destination: end,
                              travelMode: 'DRIVING'
                            }, function(response, status) {
                              if (status === 'OK') {
                                directionsDisplay.setDirections(response);
                              } else {
                                window.alert('Directions request failed due to ' + status);
                              }
                            });
                          }
                        </script>

Answer 1

您可以创建两个隐藏的输入（文本），分别命名为“开始”和“结束”，然后使用数据库中的值填充它们。

如何使用PHP值指导Google地图API并在页面加载时加载地图

1 个答案: