javascript - 无法关闭 Google map 中的远足路线图层

Question

我正在尝试关闭 Google map 远足路线是自定义样式 map ，但它仍然显示在 map 中。

正如你所看到的，我几乎关闭了所有图层，但远足图层仍然存在!

您能告诉我如何删除它吗？

[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

demo (jsfiddle from comments)

代码片段:

var map;
$(document).ready(function() {
  var latlng = new google.maps.LatLng(49.395505, -123.203317);
  var myOptions = {
    zoom: 14,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  map.set('styles', [{
    "featureType": "administrative",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "landscape",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "visibility": "off"
    }]
  }]);

});

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
  padding-top: 25px;
}
#map_canvas {
  width: 100%;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div class="container">
  <div class="well">
    <div id="map_canvas"></div>
  </div>
</div>

Answer 1

要删除它们，请使用以下建议的解决方法:

[
  {
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "on" }
    ]
  }
]

(来自问题跟踪器中的相关问题:Feature request: Add Feature Type for Ski Runs)

proof of concept fiddle

代码片段:

var map;
$(document).ready(function() {
  var latlng = new google.maps.LatLng(49.395505, -123.203317);
  var myOptions = {
    zoom: 14,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  map.set('styles', [
  {
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "on" }
    ]
  }
]);

});

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
  padding-top: 25px;
}
html,
body,
.container,
.well,
#map_canvas {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
  <div class="well">
    <div id="map_canvas"></div>
  </div>
</div>