Javascript 如何在航路点方向上显示两个相同地址的谷歌地图指针_Javascript_Google Maps_Google Maps Api 3_Google Maps Markers

Javascript 如何在航路点方向上显示两个相同地址的谷歌地图指针

javascript google-maps google-maps-api-3

Javascript 如何在航路点方向上显示两个相同地址的谷歌地图指针,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,我在谷歌地图的航路点方向上工作。我把相同的位置放在路线的起点和终点之间。谷歌地图只显示相同位置的一个指针我需要两个指针为相同的两个地点在航路点谷歌地图我的代码： <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Waypoints in directions&l

我在谷歌地图的航路点方向上工作。我把相同的位置放在路线的起点和终点之间。谷歌地图只显示相同位置的一个指针

我需要两个指针为相同的两个地点在航路点谷歌地图

我的代码：

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      console.log(route.legs);
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';


      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
<body onload="initialize()">
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
       <option value="Allen Street, NY">Allen Street</option>
      <option value="Ann Street, NY">Ann Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
      <option value="Bayard Street, NY">Bayard Street</option>
      <option value="Beach Street, NY">Beach Street</option>
      <option value="Beak Street, NY">Beak Street</option>
      <option value="Bethune Street, NY">Bethune Street</option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
      <option value="Allen Street, NY">Allen Street</option>
      <option value="Allen Street, NY">Allen Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
      <option value="Bayard Street, NY">Bayard Street</option>
      <option value="Beach Street, NY">Beach Street</option>
      <option value="Beak Street, NY">Beak Street</option>
      <option value="Bethune Street, NY">Bethune Street</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="Bethune Street, NY">Bethune Street</option>
      <option value="Beak Street, NY">Beak Street</option>
        <option value="Beach Street, NY">Beach Street</option>
        <option value="Bayard Street, NY">Bayard Street</option>
         <option value="Allen Street, NY">Allen Street</option>
      <option value="Ann Street, NY">Ann Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
    </select>
    <br>
      <input type="submit" onclick="calcRoute();">
    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
  </body>
</html>


方向上的航路点
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
#面板{
位置：绝对位置；
顶部：5px；
左：50%；
左边距：-180px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
}
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：6，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var-waypts=[]；
var checkboxArray=document.getElementById（'waypoints'）；
对于（var i=0；i；
summaryPanel.innerHTML+=route.legs[i]。起始地址+'to'；
summaryPanel.innerHTML+=route.legs[i]。结束地址+'
'；
summaryPanel.innerHTML+=route.legs[i].distance.text+'

'；
}
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
开始：
艾伦街
安街
巴罗街
摆也街
海滩街
比克街
白求恩街


航路点：

（按Ctrl键可选择多个选项）

艾伦街
艾伦街
巴罗街
摆也街
海滩街
比克街
白求恩街


完:
白求恩街
比克街
海滩街
摆也街
艾伦街
安街
巴罗街

我得到以下结果：

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      console.log(route.legs);
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';


      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
<body onload="initialize()">
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
       <option value="Allen Street, NY">Allen Street</option>
      <option value="Ann Street, NY">Ann Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
      <option value="Bayard Street, NY">Bayard Street</option>
      <option value="Beach Street, NY">Beach Street</option>
      <option value="Beak Street, NY">Beak Street</option>
      <option value="Bethune Street, NY">Bethune Street</option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
      <option value="Allen Street, NY">Allen Street</option>
      <option value="Allen Street, NY">Allen Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
      <option value="Bayard Street, NY">Bayard Street</option>
      <option value="Beach Street, NY">Beach Street</option>
      <option value="Beak Street, NY">Beak Street</option>
      <option value="Bethune Street, NY">Bethune Street</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="Bethune Street, NY">Bethune Street</option>
      <option value="Beak Street, NY">Beak Street</option>
        <option value="Beach Street, NY">Beach Street</option>
        <option value="Bayard Street, NY">Bayard Street</option>
         <option value="Allen Street, NY">Allen Street</option>
      <option value="Ann Street, NY">Ann Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
    </select>
    <br>
      <input type="submit" onclick="calcRoute();">
    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
  </body>
</html>

在这里，我设置在两个相同的位置“艾伦街”之间。但它返回

A->起点
C->艾伦街，艾伦街
D->目的地

但我需要以下几点，比如

A->起点
艾伦街
c->艾伦街
D->目的地

您没有看到标记B，因为它与标记C位于同一点。您应该有稍微不同的地址（例如门牌号）

尽管路线计算正确

更新

如果要格式化标记，必须使用自定义标记

在JS文档开始时，添加以下内容：

// Letters for markers
var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
// Map bounds, to fit bounds. Every marker will be added to this. See addMarker function.
var bounds = new google.maps.LatLngBounds();

函数添加标记

addMarker = function(latLng, i, isLast){
    bounds.extend(latLng);
    markerColor = isLast ? 'b' : 'a';
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: 'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-'+markerColor+'.png&text='+letters[i]+'&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale='+(2-(i*2/10))
    });
};

隐藏谷歌返回的方向

// Don't show response directions
//directionsDisplay.setDirections(response);

为自定义方向创建多段线

var polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#3366FF',
    strokeWeight: 5
});

然后，为循环编辑你的

路线.腿


for (var i = 0; i < route.legs.length; i++) {
    var routeSegment = i + 1;
    summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
    summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
    summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
    summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';

    // Add start_location marker for every route leg
    addMarker(route.legs[i].start_location, i);

    // If is last, add end_lcoation marker too
    if( i == route.legs.length-1 ){
        addMarker(route.legs[i].end_location, i+1, true);
    }                    

    // Set polyline points
    var steps = route.legs[i].steps;
    for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        for (k=0;k<nextSegment.length;k++) {
            polyline.getPath().push(nextSegment[k]);
        }
    }
}

目前，此代码为标记添加了不同的比例
，因此您可以看到标记B位于标记C之后。如何最终区分这些标记取决于您
完整的工作示例（使用jQuery）：
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      console.log(route.legs);
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';


      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
<body onload="initialize()">
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
       <option value="Allen Street, NY">Allen Street</option>
      <option value="Ann Street, NY">Ann Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
      <option value="Bayard Street, NY">Bayard Street</option>
      <option value="Beach Street, NY">Beach Street</option>
      <option value="Beak Street, NY">Beak Street</option>
      <option value="Bethune Street, NY">Bethune Street</option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
      <option value="Allen Street, NY">Allen Street</option>
      <option value="Allen Street, NY">Allen Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
      <option value="Bayard Street, NY">Bayard Street</option>
      <option value="Beach Street, NY">Beach Street</option>
      <option value="Beak Street, NY">Beak Street</option>
      <option value="Bethune Street, NY">Bethune Street</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="Bethune Street, NY">Bethune Street</option>
      <option value="Beak Street, NY">Beak Street</option>
        <option value="Beach Street, NY">Beach Street</option>
        <option value="Bayard Street, NY">Bayard Street</option>
         <option value="Allen Street, NY">Allen Street</option>
      <option value="Ann Street, NY">Ann Street</option>
      <option value="Barrow Street, NY">Barrow Street</option>
    </select>
    <br>
      <input type="submit" onclick="calcRoute();">
    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
  </body>
</html> 


$（文档）.ready（函数（）{
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
变量字母=['A'，'B'，'C'，'D'，'E'，'F'，'G'，'H'，'I'，'J']；
var bounds=new google.maps.LatLngBounds（）；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：6，
中心：芝加哥
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
方向显示.setMap（地图）；
}
addMarker=功能（latLng、i、isLast）{
边界扩展（latLng）；
markerColor=isLast？'b'：'a'；
var marker=new google.maps.marker({
位置：latLng，
地图：地图，
图标：'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-航路点-'+markerColor+'.png&text='+letters[i]+'&psize=16&font=fonts/Roboto Regular.ttf&color=FF333&ax=44&ay=48&scale='+（2-（i*2/10））
});
};
calcRoute=函数（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var-waypts=[]；
var checkboxArray=document.getElementById（'waypoints'）；
对于（var i=0；i