显示来自每个 2 标记 JavaScript 的更多方向

show more direction from each 2 marker javascript

本文关键字:JavaScript 方向 标记 显示      更新时间:2023-09-26

我已经显示了来自 2 个标记的路线方向,标记 1 包含纬度和液化天然气,标记 2 包含纬度 2 和 LNG2。从该标记中,地图将显示来自标记 1 和标记 2 的路线方向,我的问题是有很多标记,我想显示每个标记的所有路线方向,因此结果是许多路线方向将显示在地图上。帮我解决这个问题

检查下面的代码

(我从一开始就添加了这个项目的完整代码)

// DIRECTION
function initMap() {
var ren, ser;
var marker, marker2;
var i, j;
var infowindow;
var directionsDisplay;
var pointA, pointB;
    var locations = [
   <?php
            include('inc/config.php');
                $sql_lokasi="select *   from lokasi";
                $result=mysql_query($sql_lokasi) or die(mysql_error());
                while($data=mysql_fetch_object($result)){
                     ?>
                        ['<?=$data->nama;?>', <?=$data->lat;?>, <?=$data->lng;?>],
       <?
                }
          ?>
    ];
    var locations2 = [
   <?php
            include('inc/config.php');
              $sql_lokasi="select idlokasi,nama,lat,lng,lat2,lng2 from lokasi";
              $result=mysql_query($sql_lokasi) or die(mysql_error());
              while($data=mysql_fetch_object($result)){
                 ?>
                    ['<?=$data->nama;?>', <?=$data->lat2;?>, <?=$data->lng2;?>],
       <?
        }
    ?>
    ];
myOptions = {
  zoom: 12,
  center: pointA,
  mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map'), myOptions),
ser = new google.maps.DirectionsService,
ren = new google.maps.DirectionsRenderer({
map: map
});
<?php
        $result = mysql_query("SELECT * FROM lokasi");
        while ($row = mysql_fetch_array($result))
        // foreach($result as $row) // <- remove this line
            echo "addMarker(new google.maps.LatLng(".$row['lat'].", ".$row['lng']."), map), 
          addMarker2(new google.maps.LatLng(".$row['lat2'].", ".$row['lng2']."), map);";       
        ?>
for (i = 0; i < locations.length; i++) { 
  pointA = new google.maps.LatLng(locations[i][1], locations[i][2])
  };
for (j = 0; j < locations2.length; j++) { 
      pointB = new google.maps.LatLng(locations2[j][1], locations2[j][2])
      };
    // get route from A to B
  calculateAndDisplayRoute(ser, ren, pointA, pointB);
}

function calculateAndDisplayRoute(ser, ren, pointA, pointB) {
ser.route({
origin: pointA,
destination: pointB,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
    ren.setDirections(response);
    } else {
    window.alert('Directions request failed due to ' + status);
    }      
  });
}
function addMarker(pointA, map) {
        var marker = new google.maps.Marker({
            position: pointA,
            map: map,
            icon: 'seru.png',
            animation: google.maps.Animation.BOUNCE
        });
//show INFOWINDOW
        var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h3 id="firstHeading" class="firstHeading">START POINT</h3>'+
        '<div id="bodyContent">'+
        '<p>I want to show this with locations[i].lat and locations[1].lng</p>'+
        '<p>Web <a href="Facebook">'+
        'www.facebook.com</a> .</p>'+
        '</div>'+
        '</div>';
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
function addMarker2(pointB, map, j) {
        var marker2 = new google.maps.Marker({
            position: pointB,
            map: map,
            icon: 'seru 2.png',
            animation: google.maps.Animation.DROP
        });
//show INFOWINDOW
        var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h3 id="firstHeading" class="firstHeading">END POINT</h3>'+
        '<div id="bodyContent">'+
        '<p>I want to show this with locations[j].lat2 and locations[j].lng2</p>'+
        '<p>Web <a href="Facebook">'+
        'www.facebook.com</a> .</p>'+
        '</div>'+
        '</div>';
        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
        google.maps.event.addListener(marker2, 'click', function() {
          infowindow.open(map,marker2);
        });

这是显示数据库中的两个标记的代码:

<?php
        $result = mysql_query("SELECT * FROM lokasi (idlokasi,nama,lat,lng,lat2,lng2");
        while ($row = mysql_fetch_array($result))
        // foreach($result as $row) // <- remove this line
            echo "addMarker(new google.maps.LatLng(".$row['lat'].", ".$row['lng']."), map), 
          addMarker2(new google.maps.LatLng(".$row['lat2'].", ".$row['lng2']."), map);";
var pointA = new google.maps.LatLng(".$row['lat'].", ".$row['lng'].")
var pointB = new google.maps.LatLng(".$row['lat2'].", ".$row['lng2'].")
        ?>

这是我的地图截图,我的地图上仍然有一个路线方向,我想显示所有标记的方向(标记黄色到标记红色成为一个路线方向)

这是我的数据库包含 id、名称和每个纬度 lng

如果您希望calculateAndDisplayRoute函数显示多个路由,则需要为每个路由创建一个新的DirectionsRenderer对象。 请注意,方向服务受配额和速率限制的约束,因此在某些时候您将开始从DirectionsService获得OVER_QUERY_LIMIT响应。

function calculateAndDisplayRoute(ser, ren, pointA, pointB) {
  var ren = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  ser.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      ren.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

代码片段:

var map;
// DIRECTION
function initMap() {
  var marker, marker2;
  var i, j;
  var directionsDisplay;
  var pointA, pointB;
  pointA = new google.maps.LatLng(locations[0][1], locations[0][2]);
  myOptions = {
      zoom: 6,
      center: pointA,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById('map'), myOptions),
    ser = new google.maps.DirectionsService,
    ren = new google.maps.DirectionsRenderer({
      map: map
    });
  // get routes from A to B
  for (var i = 0; i < locations.length; i++) {
    var pointA = new google.maps.LatLng(locations[i][1], locations[i][2])
    var pointB = new google.maps.LatLng(locations2[i][1], locations2[i][2])
    calculateAndDisplayRoute(ser, ren, pointA, pointB);
  }
}
function calculateAndDisplayRoute(ser, ren, pointA, pointB) {
  var ren = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  ser.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      ren.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);
// New York, NY, USA (40.7127837, -74.00594130000002)
// Newark, NJ, USA (40.735657, -74.1723667)
// Morristown, NJ, USA (40.79676670000001, -74.4815438)
var locations = [
  ["New York, NY, USA", 40.7127837, -74.00594130],
  ["Newark, NJ, USA", 40.735657, -74.1723667],
  ["Morristown, NJ, USA", 40.7967667, -74.4815438]
];
// Baltimore, MD, USA (39.2903848, -76.61218930000001)
// Boston, MA, USA (42.3600825, -71.05888010000001)
// Rochester, NY, USA (43.16103, -77.6109219)
var locations2 = [
  ["Baltimore, MD, USA", 39.2903848, -76.6121893],
  ["Boston, MA, USA", 42.3600825, -71.0588801],
  ["Rochester, NY, USA", 43.16103, -77.6109219]
];
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>