v3中的简单过滤器

v3中的简单过滤器

本文介绍了图例Google Maps API v3中的简单过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Google地图API和程式设计的新手,我正在学习,但对我来说可能非常困难,因为我缺乏知识和经验,我相当自豪,因为我没有经验。我想知道如何在我的传说中实现一个简单的过滤器?只是一个简单的切换复选框隐藏标记。这将节省我很多时间。任何帮助真的赞赏,感谢阅读!
这是我现在的工作地图:

I am totally new to Google Maps Api and programming, I am learning alot though, but it can be very hard for me because my lack of knowledge and experience, I'm fairly proud that i made this with zero experience. I was wondering how to implement a simple filter in my legend? Just a simple toggle checkbox that hides markers. It would save me alot of time. Any help really appreciated, thanks for reading!This is my working map for now:

<!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>


推荐答案

像这样

<!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

Groeten uit Brussel

这篇关于图例Google Maps API v3中的简单过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 12:27