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

【问题标题】：How to show two google map pointer for two same address in waypoints directions如何在航点方向显示两个相同地址的两个谷歌地图指针
【发布时间】：2015-03-10 12:15:48
【问题描述】：

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

我需要两个指针指向谷歌地图航点中的相同两个位置。

我的代码：

<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->起点
B->艾伦街
c->艾伦街
D->目标点

【问题讨论】：

为“B”制作一个自定义标记，输入一些指示（可能是数字 2）那里有 2 个学生（/markers）。

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您没有看到标记 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))
    });
};

隐藏 google 返回的路线。

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

为自定义方向创建折线

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

然后，编辑您的 route.legs for 循环。

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]);
        }
    }
}

最后，在您的if 结束之前。

// Show driving line
polyline.setMap(map);
// Fit to bounds
map.fitBounds(bounds);

目前，这段代码为标记添加了不同的scale，因此您可以看到标记B在标记C之后。最终如何区分这些标记取决于您。

完整的工作示例（使用 jQuery）：

$(document).ready(function(){
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
    var bounds = new google.maps.LatLngBounds();
    
    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);
    }
    
    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))
        });
    };
    
    calcRoute = function() {
        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) {
                   
                // Don't show response directions
                //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);
 
                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]);
                        }
                    }
                }
                
                polyline.setMap(map);
                map.fitBounds(bounds);
            }
        });
    }

    initialize();
});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <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>

【讨论】：

我已经为孩子创建了路线巴士，如果有两个孩子在场，地址意味着我如何查看两个指针
来吧。即使您可以将 2 个标记放在同一个位置，它们也会在同一个位置，因此您不会看到其中有 2 个。取而代之的是，删除默认标记并创建您自己的标记，例如在其中使用特定颜色、标题或数字。