我是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>