自定义Google地图中的单选按钮过滤器图例

时间:2017-06-17 09:19:07

标签: google-maps checkbox google-maps-api-3 filter google-maps-markers

我是Google Maps Api的新手。到目前为止,我做了很多,真的很喜欢这个。但是有一个问题我希望你的帮助,因为我无法弄清楚它会省去很多时间。如何在我的图例中添加简单的过滤器?只是一个隐藏/显示标记的简单下拉框。真的很感激我能得到的任何帮助!现在这是我的地图(通常有更多标记):

<head>
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

<div id="map" style="width: 100%; height: 420px;margin:10px 0px 30px;">
  <div class="container">
<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: new google.maps.LatLng(36.524500, -4.882175),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker1 = new google.maps.LatLng(36.521604, -5.046373);
    var marker2 = new google.maps.LatLng(36.558387, -4.929676);
    var marker3 = new google.maps.LatLng(36.503746, -4.843931);


    var marker = new google.maps.Marker({
        position: marker1,
        url: 'marker1.html',
        title: 'marker1',
        icon: 'marker1.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });

    var marker = new google.maps.Marker({
        position: marker2,
        url: 'marker2.html',
        title: 'marker2',
        icon: 'images/markers/marker2.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });

    var marker = new google.maps.Marker({
        position: marker3,
        url: 'marker3',
        title: 'marker3',
        icon: 'images/markers/marker3.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      window.open(this.url, '_blank');
    });


  </script>

</div>


</div>

  

0 个答案:

没有答案