Question

我对Google Maps Api和编程都很陌生，我正在学习很多，但对我来说这可能非常困难，因为我缺乏知识和经验，我很自豪，因为我没有经验。我想知道如何在我的传奇中实现一个简单的过滤器？只是一个隐藏标记的简单切换复选框。这会节省我很多时间。任何帮助真的很感激，谢谢你的阅读！这是我现在的工作地图：

<!DOCTYPE html>
<html>
<head>
<title>Spierings Points of Interest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
<meta charset="utf-8">
<style>
  html, body,    
  #map_canvas {
    width: 800px;
    height: 400px;
  }
  #legend {
    font-family: Helvetica;color: #FFD900;
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    margin: 25px;
    border: 1px solid #FFD900;      }
  #legend h3 {
    margin-top: 0;
  }
  #legend img {
    vertical-align: middle;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  var map;
  function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 13,
      center: new google.maps.LatLng(51.789532, 5.548550),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
        {
        stylers: [
        { hue: '#ff1a00' },
        { invert_lightness: true },
        { saturation: -100  },
        { lightness: 33 },
        { gamma: 0.5 }
        ]
        }, {
          featureType: 'poi.business',
elementType: ' labels.icon',
stylers: [
  { visibility: 'on' },
   { hue: '#fff700' },
            { lightness: -15 },
            { saturation: 99 }
          ]
        }, {
          featureType: 'water',
    elementType: 'geometry',
    stylers: [
        { color: '#2D333C' },
        { lightness: 15 }
          ]
        }, {
          featureType: 'transit.station.rail',
          elementType: 'labels.text.stroke',
          stylers: [
          { visibility: 'on' },
          { color: '#FF6666' }
          ]      
        }, {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [
            { visibility: 'on' },
            { lightness: -35 }
          ]
        }, {
          featureType: 'road.local',
          elementType: 'geometry.fill',
          stylers: [
            { visibility: 'on' },
            { hue: '#FFD900' },
            { lightness: 30 },
            { saturation: 99 }
          ]
        }
      ]
    });

    var iconBase = 'https://i.imgur.com/';
    var icons = {
      spierings: {
        name: 'Spierings Mobile Cranes',
        icon: iconBase + '2LLAvWx.png'
      },
      hotel: {
        name: 'Hotel',
        icon: iconBase + 'fQ85Rxi.png'
      },
      gasstation: {
        name: 'Gas Station',
        icon: iconBase + '71YrkJY.png'
        },
        trainstation: {
        name: 'Train Station',
        icon: iconBase + 'h1CWWIO.png'
        }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }

    var features = [
      {
        position: new google.maps.LatLng(51.789532, 5.548550),
        type: 'spierings'        
      }, {
        position: new google.maps.LatLng(51.763214, 5.518806),
        type: 'hotel'
      }, {
       position: new google.maps.LatLng(51.752384, 5.533238),
        type: 'gasstation'
        }, {
          position: new google.maps.LatLng(51.764920, 5.529560),  
        type: 'trainstation'
        }
    ];

    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
    }

    var legend = document.getElementById('legend');
    for (var key in icons) {
      var type = icons[key];
      var name = type.name;
      var icon = type.icon;
      var div = document.createElement('div');
      div.innerHTML = '<img src="' + icon + '"> ' + name;
      legend.appendChild(div);
    }

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><h3>Points of Interest</h3></div>
</body>
</html>

Answer 1

喜欢这个

<!DOCTYPE html>
<html>
<head>
<title>Spierings Points of Interest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
<meta charset="utf-8">
<style>
  html, body,    
  #map_canvas {
    width: 800px;
    height: 400px;
  }
  #legend {
    font-family: Helvetica;color: #FFD900;
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    margin: 25px;
    border: 1px solid #FFD900;      }
  #legend h3 {
    margin-top: 0;
  }
  #legend img {
    vertical-align: middle;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  var map;
  var markers = [];  // we well store the markers here, 
  function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 13,
      center: new google.maps.LatLng(51.789532, 5.548550),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
        {
        stylers: [
        { hue: '#ff1a00' },
        { invert_lightness: true },
        { saturation: -100  },
        { lightness: 33 },
        { gamma: 0.5 }
        ]
        }, {
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [
            { visibility: 'on' },
            { hue: '#fff700' },
            { lightness: -15 },
            { saturation: 99 }
          ]
        }, {
          featureType: 'water',
    elementType: 'geometry',
    stylers: [
        { color: '#2D333C' },
        { lightness: 15 }
          ]
        }, {
          featureType: 'transit.station.rail',
          elementType: 'labels.text.stroke',
          stylers: [
          { visibility: 'on' },
          { color: '#FF6666' }
          ]      
        }, {
          featureType: 'poi',
          elementType: 'geometry',
          stylers: [
            { visibility: 'on' },
            { lightness: -35 }
          ]
        }, {
          featureType: 'road.local',
          elementType: 'geometry.fill',
          stylers: [
            { visibility: 'on' },
            { hue: '#FFD900' },
            { lightness: 30 },
            { saturation: 99 }
          ]
        }
      ]
    });

    var iconBase = 'https://i.imgur.com/';
    var icons = {
      spierings: {
        name: 'Spierings Mobile Cranes',
        icon: iconBase + '2LLAvWx.png'
      },
      hotel: {
        name: 'Hotel',
        icon: iconBase + 'fQ85Rxi.png'
      },
      gasstation: {
        name: 'Gas Station',
        icon: iconBase + '71YrkJY.png'
        },
        trainstation: {
        name: 'Train Station',
        icon: iconBase + 'h1CWWIO.png'
        }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
      markers.push({
        marker: marker,
        type: feature.type
      });
    }

    var features = [
      {
        position: new google.maps.LatLng(51.789532, 5.548550),
        type: 'spierings'        
      }, {
        position: new google.maps.LatLng(51.763214, 5.518806),
        type: 'hotel'
      }, {
       position: new google.maps.LatLng(51.752384, 5.533238),
        type: 'gasstation'
        }, {
          position: new google.maps.LatLng(51.764920, 5.529560),  
        type: 'trainstation'
        }
    ];

    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
    }

    var legend = document.getElementById('legend');
    var i=0;
    for (var key in icons) {
      var type = icons[key];
      var name = type.name;
      var icon = type.icon;
      var div = document.createElement('div');
      div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + features[i].type + '\')"><img src="' + icon + '"> ' + name;
      legend.appendChild(div);
      i++;
    }
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
  }

  function toggleType(elm, event, type) {
    var on = elm.checked ;
    for(var i=0; i<markers.length; i++) {
      if (markers[i].type == type) {
        markers[i].marker.setMap( on ? map : null);
      }
    }
  } 
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><h3>Points of Interest</h3></div>
</body>
</html>

Groeten uit Brussel

图例Google Maps API v3中的简单过滤器

1 个答案: