谷歌地图api多个标记

时间:2017-12-31 02:14:03

标签: javascript php google-maps

我有这个脚本在我的sql db中只显示地图上的源和目标(A和B),我想在目标路由上设置多个标记(destionations)。从A到B - > C-> D-> ..等等,如果可能的话,地图目的地自动加载,我不必使用“点击”#39;事件。需要一些帮助。谢谢!

Javascript代码:

        <script type="text/javascript"> 
function initMap() {  
  var lat_lng = {lat: 45.30000, lng: 24.0817263};  
  var directionsService = new google.maps.DirectionsService;    
  var directionsDisplay = new google.maps.DirectionsRenderer;    
  var map = new google.maps.Map(document.getElementById('map'), {    
    zoom: 8,    
    center: lat_lng    
  });    
  directionsDisplay.setMap(map);    
    google.maps.event.trigger(map, 'resize');
  var onChangeHandler = function() {    
    calculateAndDisplayRoute(directionsService, directionsDisplay);    
  };    

  document.getElementById('Source').addEventListener('click', onChangeHandler);    
  document.getElementById('Destination').addEventListener('click', onChangeHandler);    
}    

function calculateAndDisplayRoute(directionsService, directionsDisplay) {    
  directionsService.route({    
    origin: document.getElementById('Source').value,    
    destination: document.getElementById('Destination').value,  
    travelMode: google.maps.TravelMode.DRIVING    
  }, function(response, status) {    
    if (status === google.maps.DirectionsStatus.OK) {    
      directionsDisplay.setDirections(response);    
    } else {    
      window.alert('Request for getting direction is failed due to ' + status);    
    }    
  });

}  
$('a[data-toggle="tab"]')['on']('shown.bs.tab',function(event){
    google.maps.event.trigger(map, 'resize');

}); 
</script>

Html&amp; Php代码:

<div class="tab-pane fade" id="tab_3">  
                        <?php 
$db = mysqli_connect("localhost", "root", "", "");
 $qz = mysqli_query($db,"SELECT * FROM tours WHERE id = ".$_GET["id"]."");
while ($row = mysqli_fetch_assoc($qz)) {
 $source= $row['source'];
 $destination= $row['destination'];
 ?>


    <b>Source: </b>    
    <select id="Source">    

      <option value="<?php echo $source; ?>, in"><?php echo $source; ?></option> 

    </select>    
    <b>Destination: </b>    
    <select id="Destination">    
      <option value="<?php echo $destination; ?>, in"><?php echo $destination; ?></option>    

    </select>    

      <div id="map"></div> 

                        <!-- end map-->

                    </div>

                    <?php } ?>
                    <!-- End tab_3 -->

0 个答案:

没有答案