Javascript/谷歌图表-为谷歌地图添加标记过滤器

Javascript / Google Charts - Add marker filters to google maps

本文关键字：谷歌地图 添加 加标记 过滤器 谷歌 Javascript      更新时间：2023-09-26

我正在尝试制作一张地图，该地图将根据所选的下拉选项填充位置标记。我在这里找到了一个半工作的jsfiddle

http://jsfiddle.net/kamelkid2/drytwvL8/77/

基本上，最终结果是用户可以选择是否查看最适合年龄组的游乐场和/或带婴儿秋千的游乐场。生成的标记将填充在地图上

我可以让第一个标记过滤器正常工作

<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">BEST FOR (SHOW ALL)</option>
    <option value="BABIES">BEST FOR BABIES</option>
    <option value="TODDLERS">BEST FOR TODDLERS</option>
    <option value="KIDS">BEST FOR KIDS</option>
    <option value="ALL">BEST FOR ALL</option>
</select>

这是过滤器

filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

然而，第二个标记过滤器在我尝试过的多次尝试中都不会起作用。有可能过滤掉2个下拉列表吗？或者我应该尝试其他策略吗？

链接的jsfiddle几乎是我最好的尝试，但我还不太擅长javascript，所以我希望能为我妻子的妈妈小组

的一个小项目提供一些指导

您忘记了两件事：

1.您忘记将categorybs添加到标记中，只添加了category:

marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        categorybs: categorybs, //add this line
        map: map
    });

2.您的filterMarkersBS函数使用category而不是categorybs。你需要这样更新：

filterMarkersBS = function (categorybs) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.categorybs == categorybs || categorybs.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

工作代码：

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});
// Our markers
markers1 = [
    ['0', 'Cascade Park - 130 Lynn Dr, Hudson, OH 44236', 41.234830, -81.453479, 'KIDS', 'BSNO'],
    ['1', 'Hudson Springs Park - 7095 Stow Rd, Hudson, OH 44236', 41.250798, -81.407120, 'BABIES', 'BSYES'],
    ['2', 'Middleton Park - 1708 Middleton Rd, Hudson, OH 44236', 41.268963, -81.450649, 'ALL', 'BSNO']
];
/**
 * Function to init map
 */
function initialize() {
    var center = new google.maps.LatLng(41.234830, -81.453479);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }
}
/**
 * Function to add marker to map
 */
function addMarker(marker) {
    var category = marker[4];
    var categorybs = marker[5];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];
    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        categorybs: categorybs,
        map: map
    });
    gmarkers1.push(marker1);
    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
        }
    })(marker1, content));
}
/**
 * Function to filter markers by category
 */
filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}
filterMarkersBS = function (categorybs) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.categorybs == categorybs || categorybs.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}
// Init map
initialize();
#map-canvas {
    width: 500px;
    height: 500px;
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">BEST FOR (SHOW ALL)</option>
    <option value="BABIES">BEST FOR BABIES</option>
    <option value="TODDLERS">BEST FOR TODDLERS</option>
    <option value="KIDS">BEST FOR KIDS</option>
    <option value="ALL">BEST FOR ALL</option>
</select>
<br>
<select id="type" onchange="filterMarkersBS(this.value);">
    <option value="">BABY SWINGS (SHOW ALL)</option>
    <option value="BSYES">HAS BABY SWINGS</option>
    <option value="BSNO">DOES NOT HAVE BABY SWINGS</option>
</select>

相关文章：