Question

我正在寻求帮助。我在谷歌地图代码下方工作正常。我唯一需要的是起点上的自定义标记：（51.943382,6.463116）并且在航点上没有标记。可以这样做吗？我已经尝试过Stackoverflow的几个解决方案，但是我对GM代码和编程技巧的理解还不足以得到我想要的东西。谢谢！

<!DOCTYPE html>
<html>
    <head>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>

        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          var directionDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;

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


              var myOptions = {
                  zoom: 10,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
              }


              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              directionsDisplay.setMap(map);
              calcRoute();
          }

          function calcRoute() {

              var waypts = [];


              stop = new google.maps.LatLng(51.943571, 6.463856)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.945032, 6.465776)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.945538, 6.469413)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.947462, 6.467941)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.945409, 6.465562)
                      waypts.push({
                          location:stop,
                          stopover:true});
              stop = new google.maps.LatLng(51.943700, 6.462096)
                      waypts.push({
                          location:stop,
                          stopover:true});

              start  = new google.maps.LatLng(51.943382, 6.463116);
              end = new google.maps.LatLng(51.943382, 6.463116);

              var request = {
                  origin: start,
                  destination: end,
                  waypoints: waypts,
                  optimizeWaypoints: true,
                  travelMode: google.maps.DirectionsTravelMode.WALKING
              };

              directionsService.route(request, function(response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionsDisplay.setDirections(response);
                      var route = response.routes[0];

                  }
              });
          }
        </script>
    </head>
    <body onLoad="initialize()">
        <div id="map_canvas" style="width:70%;height:80%;"></div>
    </body>
</html>

Answer 1

我只看到一种解决方案。使用以下代码删除所有标记：

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
});

并在起点处手动添加标记。

这是一个 JSFiddle 来说明。

希望这有帮助！

Answer 2

只需添加与标记无关的标记。

var marker = new google.maps.Marker({
    position: start,
    map: map
});

这是假设您将此添加到初始化函数中，以便访问地图。否则，您需要将地图变量设置为全局变量，以便可以在calcRoute函数中访问它。

在您的directionsDisplay对象中，将suppressMarkers设置为true：

directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers : true
});

请参阅https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions

Google地图中的自定义和航点标记

2 个答案: