Javascript 为标记指定类别

我有一个带有几个标记的地图，我不能做数组，因为这个页面需要独立（没有外部源）。我需要为每个标记分配一个索引，这样我就可以创建一个复选框、下拉或滑块控件来关闭/打开所需的标记类别。假设我有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

//开始标记8（红色-标记颜色）
var latLng8=新的google.maps.LatLng（34.18101.40）；
var contentString8=''+
“行驶方向
输入您的出发地址”+
“

”+
'' +
“
”+
'';
var infowindow8=新建google.maps.InfoWindow({
内容：contentString8
});
var marker8=新的google.maps.Marker({
位置：latLng8，
图标：src=http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
地图：地图，
标题：“地点1”
});
google.maps.event.addListener（marker8，'click'，函数（）{
信息窗口8.打开（地图、标记8）；
});
//结束标记7
这是一个纯javascript的完整示例，除了google代码之外，没有外部资源

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

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

因此，现在取决于您为地图设置正确的中心，为标记、类别等设置正确的板条。希望你能看到原则

脚本：

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);

var marker1、marker2、marker3、marker4、marker5、marker6、marker7、marker8；
var映射；
var-markersArray=[]；
函数getRandomLatLng（）{
var lat=Math.random（）*30；
var lng=数学随机数（）*30；
返回新的google.maps.LatLng（lat，lng）；
}
函数createMap（）{
var mapCenter=getRandomLatLng（）；
console.log（地图中心）；
map=new google.maps.map（document.getElementById（“map”）{
中心：地图中心，
缩放：2，
mapTypeId:google.maps.mapTypeId.TERRAIN，
动物控制：对，
街景控制：错误，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
}
});
}
功能createMarker（板条，类别）{
var marker=new google.maps.marker({
位置：latLng，
地图：地图，
类别：类别
});
markersArray.push（marker）；
返回标记；
}
函数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）；
}
功能显示MarkersByCategory（类别）{
对于（var i=0；i，这里是一个纯javascript的完整示例，除了google代码之外，没有外部资源

它在一个随机位置上创建一张地图，然后创建8个标记，也包括一个随机位置和类别1-4

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

现在，你可以为地图设置正确的中心，为标记、类别等设置正确的板条。希望你能看到原理

脚本：

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);

var marker1、marker2、marker3、marker4、marker5、marker6、marker7、marker8；
var映射；
var-markersArray=[]；
函数getRandomLatLng（）{
var lat=Math.random（）*30；
var lng=数学随机数（）*30；
返回新的google.maps.LatLng（lat，lng）；
}
函数createMap（）{
var mapCenter=getRandomLatLng（）；
console.log（地图中心）；
map=new google.maps.map（document.getElementById（“map”）{
中心：地图中心，
缩放：2，
mapTypeId:google.maps.mapTypeId.TERRAIN，
动物控制：对，
街景控制：错误，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
}
});
}
功能createMarker（板条，类别）{
var marker=new google.maps.marker({
位置：latLng，
地图：地图，
类别：类别
});
markersArray.push（marker）；
返回标记；
}
函数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）；
}
功能显示MarkersByCategory（类别）{
对于（var i＝0；iAh不），我需要切换不同组的ON/OFF？？我如何用我自己的标记位置替换GeTrand？“我想不出我在XXX网站上的复制粘贴"-通常，网络上的示例和代码质量不是很好，通常比教育性的代码更容易混淆。实际上，如果您只做两个更改，您的代码看起来很正确：删除
var marker1，marker2，…marker8；
行，删除
marker1=
，
marker2=
，等等。因此您只需调用
>CreateMarket
。然后您将所有标记放入一个数组中，如