如何在多个标记之间制作路线方向 [英] How to make route direction between multiple markers

查看：74
本文介绍了如何在多个标记之间制作路线方向的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在曼利海滩 - >邦迪海滩 - >库吉海滩 - >马鲁布拉海滩 - >克罗努拉海滩之间建立路线方向，最后从克罗努拉海滩前往曼利海滩

 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title> Google地图多个标记< / title> 
< script src =http://maps.google.com/maps/api/js?sensor=false
 type =text / javascript>< / script> 
< / head> 
< body> 
< div id =mapstyle =width：500px; height：400px;>< / div> 
 
< script type =text / javascript> 
 var locations = [
 ['Bondi Beach'，-33.890542,151.274856,4]，
 ['Coogee Beach'，-33.923036,151.259052,5]，
 [' Cronulla Beach'，-34.028249,151.157507,3]，
 ['Manly Beach'，-33.80010128657071,151.28747820854187,2]，
 ['Maroubra Beach'，-33.950198,151.259302,1] 
]; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：10，
 center：new google.maps.LatLng（ - 33.92,151.25），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
 map：map 
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ] [b]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
< / script> 
< / body> 
< / html>

CodePen： http://codepen.io/anon/pen/VaQwqK

解决方案

相关问题：








  1. 将位置数组按照您要获取路线的顺序放置。





  var locations = [
 ['Manly Beach'，-33.80010128657071,151.28747820854187,2]，
 ['Bondi Beach'， - 33.890542,151.274856,4]，
 ['Coogee Beach'，-33.923036,151.259052,5]，
 ['Maroubra Beach'，-33.950198,151.259302,1]，
 ['Cronulla Beach'，-34.028249,151.157507,3] 
];




  1. 创建 DirectionsService ，第一个标记位于 origin 中最后一个标记位于目的地中，将其余部分推入路点数组中： / p> 

      if（i == 0）request.origin = marker.getPosition（）; 
     else if（i == locations.length  -  1）request.destination = marker.getPosition（）; 
     else {
     if（！request.waypoints）request.waypoints = []; 
     request.waypoints.push（{
     location：marker.getPosition（），
     stopover：true 
    }）; 
    }




    1. 呼叫方向服务。





      directionsService.route（request，function（result ，状态）{
     if（status == google.maps.DirectionsStatus.OK）{
     directionsDisplay.setDirections（result）; 
    } 
    }）;

    概念证明小提琴



    代码段： 

      var geocoder; var map; var directionsDisplay; var directionsService = new google.maps.DirectionsService（）; var locations = [['Manly Beach ''-33.80010128657071,151.28747820854187,2]，['Bondi Beach'，-33.890542,151.274856,4]，['Coogee Beach'，-33.923036,151.259052,5]，['Maroubra Beach'，-33.950198,151.259302,1 ]，['Cronulla Beach'，-34.028249,151.157507,3]];函数initialize（）{directionsDisplay = new google.maps.DirectionsRenderer（）; var map = new google.maps.Map（document.getElementById（'map'），{zoom：10，center：new google.maps.LatLng（-33.92，151.25），mapTypeId：google.maps.MapTypeId.ROADMAP}） ; directionsDisplay.setMap（地图）; var infowindow = new google.maps.InfoWindow（）; var marker，i; var request = {travelMode：google.maps.TravelMode.DRIVING}; （位置[i] [1]，位置[i] [2] ），}）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infowindow.setContent（locations [i] [0]）; infowindow.open（map，marker）;} }）（marker，i））; if（i == 0）request.origin = marker.getPosition（）; else if（i == locations.length  -  1）request.destination = marker.getPosition（）; else {if（！request.waypoints）request.waypoints = []; request.waypoints.push（{location：marker.getPosition（），stopover：true}）; }} directionsService.route（request，function（result，status）{if（status == google.maps.DirectionsStatus.OK）{directionsDisplay.setDirections（result）;}}）;} google.maps.event.addDomListener（window ，load，initialize）;

    < #map {height：100％;宽度：100％; margin：0px; < script src =https：//


    How to make route direction between Manly Beach -> Bondi Beach -> Coogee Beach -> Maroubra Beach -> Cronulla Beach and finally go from Cronulla Beach to Manly Beach 

    <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

    CodePen: http://codepen.io/anon/pen/VaQwqK

    解决方案

    related questions:

    1. put the locations array in the order you want to get the directions in.

    var locations = [
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Maroubra Beach', -33.950198, 151.259302, 1],
    ['Cronulla Beach', -34.028249, 151.157507, 3]
  ];

    1. create the request for the DirectionsService with the first marker in origin the last marker in destination, push the rest into the waypoints array:

    if (i == 0) request.origin = marker.getPosition();
else if (i == locations.length - 1) request.destination = marker.getPosition();
else {
  if (!request.waypoints) request.waypoints = [];
  request.waypoints.push({
    location: marker.getPosition(),
    stopover: true
  });
}

    1. call the directions service.

    directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(result);
  }
});

    proof of concept fiddle

    code snippet:

    var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = [
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Maroubra Beach', -33.950198, 151.259302, 1],
  ['Cronulla Beach', -34.028249, 151.157507, 3]
];

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();
    else {
      if (!request.waypoints) request.waypoints = [];
      request.waypoints.push({
        location: marker.getPosition(),
        stopover: true
      });
    }

  }
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

    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>

    这篇关于如何在多个标记之间制作路线方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆