如何删除原点和目标标记但仍保留白色小圆点？

时间：2016-02-04 01:57:03

标签： google-maps-api-3

image of route with infowindow

我使用谷歌地图方向api和传输模式来创建地图（代码如下）。我想删除原点和目标标记，但仍保留地图上的白色小圆点。

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps API v3 Directions Example</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
html, body, #map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel li:before{
  padding: 3px;
  display:block;
  color:#fff;
  font-weight:bold;
} 
#panel li:nth-child(1):before{
  content:'startLeg:TRANSIT';
  background:green;
} 
#panel li:nth-child(2):before{
  content:'middleLeg:TRANSIT';
  background:blue;
} 
#panel li:nth-child(3):before{
  content:'endLeg:TRANSIT';
  background:red;
  color:#000;
}
</style>
</head> 
<body> 
   <div id="map" style="width: 800px; height: 1800px; float: left;"></div> 
   <div id="panel" style="width: 450px; float: right;"></div>

   <script type="text/javascript"> 
function initialize() {
    var goo         = google.maps,
        map         = new goo.Map(document.getElementById('map'),
       {
         center  : new goo.LatLng(23, 122),//地圖中心點
         zoom    : 7,
         styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
        }),
        App = { 
          map               : map,
          bounds            : new goo.LatLngBounds(),
          directionsService : new goo.DirectionsService(),    
          directionsDisplay: new goo.DirectionsRenderer({
          map             : map,
          preserveViewport: true,
          suppressMarkers : false,
          polylineOptions : {
            strokeColor:'green',strokeOpacity: 0.5,
            strokeWeight: 7},
          panel           : document.getElementById('panel').appendChild(document.createElement('li'))})
        }
        startLeg   = {
          origin     :  '(25.0327698,121.5681653)',
          destination :  '(25.0404699,121.5635321)',
          travelMode  :  goo.DirectionsTravelMode.TRANSIT},             
        App.directionsService.route(startLeg, function(result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            App.directionsDisplay.setDirections(result);
            App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
          }
        }); 
}
google.maps.event.addDomListener(window, 'load', initialize);
</script> 
</body> 
</html>

image of route with infowindow

1 个答案:

答案 0 :(得分：0)

您不能仅DirectionRenderer渲染某些标记（至少目前为止）。您可以设置suppressMarkers:true，然后解析directions response以显示您想要渲染的标记。

proof of concept fiddle

代码段 

function initialize() {
  var goo = google.maps,
    map = new goo.Map(document.getElementById('map'), {
      center: new goo.LatLng(23, 122), //地圖中心點
      zoom: 7,
      styles: [{
        "featureType": "landscape",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 65
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "poi",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 51
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "road.highway",
        "stylers": [{
          "saturation": -100
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "road.arterial",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 30
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "road.local",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 40
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "transit",
        "stylers": [{
          "saturation": -100
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "administrative.province",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [{
          "visibility": "on"
        }, {
          "lightness": -25
        }, {
          "saturation": -100
        }]
      }, {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
          "hue": "#ffff00"
        }, {
          "lightness": -25
        }, {
          "saturation": -97
        }]
      }]

    }),


    App = {
      map: map,
      bounds: new goo.LatLngBounds(),
      directionsService: new goo.DirectionsService(),
      directionsDisplay: new goo.DirectionsRenderer({
        map: map,
        preserveViewport: true,
        suppressMarkers: true,
        polylineOptions: {
          strokeColor: 'green',
          strokeOpacity: 0.5,
          strokeWeight: 7
        },
        panel: document.getElementById('panel').appendChild(document.createElement('li'))
      })


    }
  startLeg = {
      origin: '(25.0327698,121.5681653)',
      destination: '(25.0404699,121.5635321)',
      travelMode: goo.DirectionsTravelMode.TRANSIT
    },

    App.directionsService.route(startLeg, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        App.directionsDisplay.setDirections(result);
        for (var i = 0; i < result.routes[0].legs.length; i++) {
          for (var j = 0; j < result.routes[0].legs[i].steps.length; j++) {
            if (j == 1) {
              var startM = new goo.Marker({
                position: result.routes[0].legs[i].steps[j].start_location,
                map: map,
                icon: {
                  path: 'M256,320c-70.688,0-128-57.312-128-128c0-70.687,57.313-128,128-128c70.688,0,128,57.313,128,128C384,262.688,326.688,320,256,320z',
                  fillColor: 'white',
                  fillOpacity: 1,
                  scale: 0.03,
                  strokeColor: 'black',
                  strokeWeight: 1,
                  strokeOpacity: 1,
                  anchor: new google.maps.Point(200, 200)
                },
                title: "start " + i + ":" + j
              });
              var endM = new goo.Marker({
                position: result.routes[0].legs[i].steps[j].end_location,
                map: map,
                icon: {
                  path: 'M256,320c-70.688,0-128-57.312-128-128c0-70.687,57.313-128,128-128c70.688,0,128,57.313,128,128C384,262.688,326.688,320,256,320z',
                  fillColor: 'white',
                  fillOpacity: 1,
                  scale: 0.03,
                  strokeColor: 'black',
                  strokeWeight: 1,
                  strokeOpacity: 1,
                  anchor: new google.maps.Point(200, 200)
                },
                title: "end " + i + ":" + j
              });
            }
          }
        }
        App.map.fitBounds(App.bounds.union(result.routes[0].bounds));
      }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#panel li:before {
  padding: 3px;
  display: block;
  color: #fff;
  font-weight: bold;
}
#panel li:nth-child(1):before {
  content: 'startLeg:TRANSIT';
  background: green;
}
#panel li:nth-child(2):before {
  content: 'middleLeg:TRANSIT';
  background: blue;
}
#panel li:nth-child(3):before {
  content: 'endLeg:TRANSIT';
  background: red;
  color: #000;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="float: left;"></div>
<div id="panel"></div>

相关问题
最新问题