0

我在不同的数组中有 5 组标记。我试图将它放在有一个复选框来隐藏和显示不同类别的标记的位置，以便查看者可以隐藏他们不想看到的标记，例如“餐厅”。我已经尝试了几个例子，但我对此并不陌生，所以到目前为止没有任何效果。

这是我所拥有的：

<script>


    //add map, the type of map
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: new google.maps.LatLng(31.5603, -91.4031),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //add locations
    var cottages = [
        ['Savannah Cottage<br />412 S. Pearl Street<br /><a href="cottages/savannah.html" target= "_blank">Cottage Detail</a>', 31.55600224874313, -91.4073497056961, 'images/markers/darkgreen_MarkerA.png'],

        ['Clairmont Cottage<br />410 S. Pearl Street<br /><a href="cottages/clairmont.html" target= "_blank">Cottage Detail</a>', 31.556971333120384,-91.40638679265976, 'images/markers/darkgreen_MarkerD.png'], 

        ['Elmsley Cottage<br />411 S. Pearl Street<br /><a href="cottages/elmsley.html" target= "_blank">Cottage Detail</a>',31.556825,-91.406261, 'images/markers/darkgreen_MarkerB.png'],

        ['Marcias Cottage<br />409 S. Pearl Street<br /><a href="cottages/marciascottage.html" target= "_blank">Cottage Detail</a>', 31.55696676199132,-91.40613734722137, 'images/markers/darkgreen_MarkerC.png'],

        ['Evergreen Cottage<br />30 Cemetery Road<br /><a href="cottages/evergreen.html" target= "_blank">Cottage Detail</a>', 31.578133, -91.39715699999999, 'images/markers/darkgreen_MarkerF.png' ],

        ['Laurel Cottage<br />910 Washington Street<br /><a href="cottages/laurel.html" target= "_blank">Cottage Detail</a>', 31.553599, -91.398572, 'images/markers/darkgreen_MarkerE.png'],
        ];

    var restaurants = [
    ['Cotton Alley Cafe<br />208 Main Street<br />(601)442-7452<br /><a href="http://www.cottonalleycafe.com" target= "_blank">Website</a>', 31.561075,-91.40503100000001, 'images/markers/red_MarkerA.png'],

    ['Lil Dagos<br />29 Sgt Prentiss Dr #8<br />(601) 304-2221<br /><a href="http://www.lildago.com" target= "_blank">Website</a>',31.523916,-91.38916999999998, 'images/markers/red_MarkerB.png'],

    ['Slick Ricks Foods<br />109 North Pearl Street<br />(601) 445-9900<br /><a href="http://www.slickricksfoods.com/" target= "_blank">Website</a>', 31.560337,-91.40300100000002, 'images/markers/red_MarkerC.png'],

    ['Big Mamas BBQ<br />203 John R Junkin Drive<br />(601) 445-0227', 31.550414,-91.41070400000001, 'images/markers/red_MarkerD.png'],

    ];

    var bars = [
    ['Under-the-Hill Saloon<br />25 Silver Street<br />(601) 446-8023<br /><a href="http://www.underthehillsaloon.com/" target="_blank">Website</a>', 31.559589, -91.41074700000001, 'images/markers/yellow_MarkerA.png'],

    ['Biscuits &amp; Blues<br />315 Main Street<br />(601) 446-9922<br /><a href="http://www.biscuitsblues.com/" target="_blank">Website</a>', 31.560868,-91.40409899999997, 'images/markers/yellow_MarkerB.png'],

    ['The Corner Bar<br />201 State Street<br /><a href="http://www.visitnatchez.org/listings/?action=display&listingID=275&menuID=153&hit=1" target="_blank">Website</a>', 31.5605727, -91.40621479999999,'images/markers/yellow_MarkerC.png'],

    ['Old South Winery<br />65 South Concord Avenue<br />(601) 445-9924<br /><a href="http://oldsouthwinery.com/" target="_blank">Website</a>', 31.561868,-91.38208600000002, 'images/markers/yellow_MarkerD.png'],

    ['The Pub at Dunleith<br />84 Homochitto Street<br />(800) 433-2445<br /><a href="http://www.dunleith.com/inn/the-castle-restuarant.cfm/#pub" target="_blank">Website</a>', 31.54952,-91.39993400000003, 'images/markers/yellow_MarkerE.png'],
    ];

    var tours = [
    ['Auburn Antebullum Home<br />400 Duncan Avenue<br />(601)442-5981', 31.5457833, -91.39274319999998, 'images/markers/purple_MarkerA.png'],

    ['Dunleith Historic Inn<br />84 Homochitto Street<br />(800)433-2445<br /><a href="http://www.dunleith.com/index.cfm" target="_blank">Website</a>',31.54952, -91.39993400000003, 'images/markers/purple_MarkerB.png' ],

    ['House On Ellicotts Hill (c 1798)<br />211 North Canal Street<br />(601)442-2011<br /><a href="http://www.natchezgardenclub.com/Ellicot.html" target="_blank">Website</a>', 31.562813,-91.404041, 'images/markers/purple_MarkerC.png'],

    ['Linden House (c 1800)<br />1 Linden Place<br />(800)254-6336<br /><a href="http://www.lindenbandb.com" target="_blank">Website</a>', 31.5522173,-91.38401599999997, 'images/markers/purple_MarkerD.png'],
    ];

    var spas = [
    ['Anruss &amp; Co Salon and Spa<br />212 North Commerce Street<br />(601) 445-2007<br /><a href="https://www.facebook.com/anruss.salon" target= "_blank">Website</a>', 31.561061,-91.40116799999998, 'images/markers/paleblue_MarkerA.png'],

    ['Pamper Me Please Full Services Salon<br />151 East Franklin Street<br />(601) 445-0206<br /><a href="http://www.natchezspa.com" target= "_blank">Website</a>',31.554539, -91.384208, 'images/markers/paleblue_MarkerB.png' ],

    ['Old South Massage by George<br />613 State Street<br />(601) 392-3657<br /><a href="http://www.osm.massagetherapy.com/" target= "_blank">Website</a>',31.557533, -91.40172999999999, 'images/markers/paleblue_MarkerC.png' ],

    ['Riverfront Royale Salon &amp; Med Spa<br />102 Front Street<br />Vidalia, LA<br />(318)336-8898<br /><a href="http://www.riverfrontspa.com/" target= "_blank">Website</a>', 31.565094,-91.419176, 'images/markers/paleblue_MarkerD.png']
       ];

      //declare marker call it 'i'
var marker, i;

//declare infowindow
var infowindow = new google.maps.InfoWindow();


 //Make an array that lists all the locations arrays.
var allLocations = [cottages, restaurants, bars, tours, spas];

//Define a generalized click handler for all markers.
//ie. one handler, not one per marker.
function clickMarker() {
    var data = this.data;
    infowindow.setContent(data.category[data.index][0]);
    infowindow.open(map, this);
    //HERE, you can loop through `data.category.markers` and 
    //do whatever is necessary to each marker in the category
    //eg change their icons.
}

//Now loop through all the markers arrays and add markers to the map
for (var i=0; i<allLocations.length; i++) {
    var arr = allLocations[i];

    //Create an associated array in which to store references to category's markers
    arr.markers = [];

    for (var marker, j=0; j<arr.length; j++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(arr[j][1], arr[j][2]),
            map: map,
            icon:(arr[j][3]),
        });

        arr.markers[j] = marker;

        //This allows the click hander to be generalized,
        //and for each marker to have a reference back
        //to its category array, and its own index.
        marker.data = {
            category: arr,
            index: j
        };



        google.maps.event.addListener(marker, 'click', clickMarker);
         }
}
}
google.maps.event.addDomListener(window, 'load', initialize);
4

0 回答 0