javascript - 为标记分配类别

Question

我有一张带有多个标记的 map ，我无法创建数组，因为该页面需要独立(没有外部源)。我需要为每个标记分配一个索引，以便我可以创建一个复选框、下拉菜单或 slider 控件来关闭/打开所需标记的类别。假设我有 10 个标记，每个类别 2 个(1-5)，我需要能够说出类别 1 和 3，并关闭其他标记。我怎样才能轻松做到这一点？有人可以推荐我可以插入到我的函数中以缩放到那些指定组的代码吗？

// Start of Marker8 (red - marker color)
var latLng8 = new google.maps.LatLng(34.18, 101.40);
var contentString8 = '<div id="content">'+
   '<p><b>Driving Directions</b><br>Enter your start address <form action="http://maps.google.com/maps" method="get" target="_blank">' +
    '<input type="text" size=20 maxlength=40 name="saddr" id="saddr" value="" /><br><br>' +
                '<input value="Get Directions to this place" type="submit">' +
                '<input type="hidden" name="daddr" value="XX.XX, -XX.XX"></p>'+    
                '</div>';
                var infowindow8 = new google.maps.InfoWindow({
                    content: contentString8
                });
                var marker8 = new google.maps.Marker({
                    position: latLng8,
                    icon: src = 'http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
                    map: map,
                    title: "place 1"
                });
                google.maps.event.addListener(marker8, 'click', function () {
                    infowindow8.open(map, marker8);
                });
                // End for Marker 7

Answer 1

这是一个纯 JavaScript 的完整示例，除了 google 代码之外，没有任何外部资源。

它会在随机位置创建 map 。然后它创建 8 个标记，也具有随机位置和类别 1-4。

然后有一个显示类别的选择框。当您选择一个类别时，会显示与该类别关联的标记，其余的则隐藏。

现在由您来设置 map 的正确中心，为标记、类别等设置正确的纬度。希望你明白其中的原理。

脚本:

var marker1, marker2, marker3, marker4, marker5, marker6, marker7, marker8;
var map;
var markersArray = [];

function getRandomLatLng() {
    var lat = Math.random()*30;
    var lng = Math.random()*30;
    return new google.maps.LatLng(lat, lng);  
}

function createMap() {
    var mapCenter = getRandomLatLng();
    console.log(mapCenter);
    map = new google.maps.Map(document.getElementById("map"), {
        center: mapCenter,
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoomControl: true,
        streetViewControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        }
    });
}

function createMarker(latLng, category) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category : category
    });
    markersArray.push(marker);
    return marker;
}

function createMarkers() {
    marker1=createMarker(getRandomLatLng(), 1);
    marker2=createMarker(getRandomLatLng(), 1);
    marker3=createMarker(getRandomLatLng(), 2);
    marker4=createMarker(getRandomLatLng(), 2);
    marker5=createMarker(getRandomLatLng(), 3);
    marker6=createMarker(getRandomLatLng(), 3);
    marker7=createMarker(getRandomLatLng(), 4);
    marker8=createMarker(getRandomLatLng(), 4);
}

function showMarkersByCategory(category) {
    for (var i=0;i<markersArray.length;i++) {
        if (markersArray[i].category==category) {
            markersArray[i].setVisible(true);
        } else {
            markersArray[i].setVisible(false);
        }
    }
}

function initialize() {
    createMap();
    createMarkers();
    var select=document.getElementById('select');
    select.onclick = function() {
        var category = this.value;
        showMarkersByCategory(category);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

标记

<div id="map" style="width:400px;height:400px;"></div>
<select id="select">
<option value="1">category 1</option>
<option value="2">category 2</option>
<option value="3">category 3</option>
<option value="4">category 4</option>
</select>