Question

我的深度在这里，我希望有人可以帮我解决这个问题......

我有一个Google地图，可以从数组中加载数据，还会填充项目的侧边栏列表。

单击侧边栏项会按预期打开相应的信息窗口o.k。

当我鼠标输入侧边栏项目时，它会根据需要平移，并突出显示相应的标记（并关闭当前打开的任何信息窗口）。

（.locs是侧边栏容器，.loc是项目）

    $(document).on("mouseenter",".loc",function() {
    var thisloc = $(this).data("locid");
    for(var i=0; i<markers.length; i++) {
        if(markers[i].locid == thisloc) {  //get the latlong
            if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
            map.panTo(markers[i].getPosition());
            markers[i].setIcon('../mapIcons/mini-white.png');
        }
    }
});

这个位工作正常，因为我只是设置一个固定的图像。但是，当我鼠标移动时，标记无法恢复到其原始状态。如果我将setIcon用于特定图像，它可以正常工作，但我想从数据集项中返回原始图标。

markers[i].setIcon("currmark");

currmark是我用来保存原始图标的var。

$(document).on("mouseleave",".loc",function() {
    var thisloc = $(this).data("locid");
    var currmark = getIcon("mapData.type");
    for(var i=0; i<markers.length; i++) {
        if(markers[i].locid == thisloc) {  //get the latlong
            map.panTo(markers[i].getPosition());
            markers[i].setIcon("currmark");
        }
    }
});

在'currmark'上设置的警报，我用来保存原始图标的var，仅显示由mouseenter setIcon设置的最后一个图标。这似乎让我觉得数据集（mapdata.type）中的原始图标已被忘记/替换为应用于markers [i]的最后一个设置。我想在设置

时需要重新访问数据集以提醒原始状态的var

    var currmark = getIcon("mapData.type");

一些补充信息......

我正在使用一个实用程序函数，将数据集中给定的“类型”转换为图标，因此是getIcon（类型）函数。

function getIcon(type) {
switch(type) {
    case "bar": return "../mapIcons/mini-blue.png";
    case "restaurant": return "../mapIcons/mini-red.png";
    case "cafe": return "../mapIcons/mini-yellow.png";
    default: return "../mapIcons/mini-white.png";
}
}

数据录入的一个例子......

var data = [
{address:'Rua  Calheta',detail:'Restaurant',title:'Dolphin',type:'restaurant',ico:'red',lat:"37.08570947136275",long:"-8.731633722782135"}
];

我希望我明智地解释了这一半。任何人都可以帮助我，因为我已经死了，我已经走到了这一步。

Beetroot的第二个附加信息显示我的标记和侧边栏最初是如何设置的....

data.forEach(function(mapData,idx) {

                var marker = new google.maps.Marker({
                    map: map, 
                    position: new google.maps.LatLng(mapData.lat,mapData.long),
                    title: mapData.title,
                    icon: getIcon(mapData.type)
                });
                var link=('<a href="#"' + mapData.title +'">');
                var contentHtml = "<div id='iw' class='iw2'><h3>" + link + mapData.title+"</a></h3>" + mapData.detail+"<br>"+mapData.address+"</div>";
                var infowindow = new google.maps.InfoWindow({
                    content: contentHtml
                });

                google.maps.event.addListener(marker, 'click', function() {
                    if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
                    marker.infowindow.open(map, marker);
                    lastinfowindow = marker.infowindow;                        
                });
                marker.locid = idx+1;
                marker.infowindow = infowindow;
                markers[markers.length] = marker;
                var spot=('<img src="' + (getIcon(mapData.type)) + '" />');

                var sideHtml = '<p class="loc" data-locid="'+marker.locid+'">'+spot+mapData.title+'</p>';
                     $("#locs").append(sideHtml); 

                if(markers.length == data.length) doFilter();

});

编辑02/07 结合Beetroot-Beetroot的光滑变化后的完整来源。在这里完整的，因为我现在意识到，只有他全面了解他才能提供帮助！现在尝试在学习后调试我不是那么聪明。

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false& style=feature:all|element:labels|visibility:off">
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var map;
var markers = [];
var lastinfowindow;
var locIndex;

 //Credit: MDN
if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
    fn.call(scope, this[i], i, this);
    }
  }
}

//my data ~ cutdown and local for testing 
var data = [
{address:'Rua Calheta',detail:'Restaurant',title:'Dolphin',type:'restaurant',icotyp:'red',lat:"37.08570947136275",long:"-8.731633722782135"},
{address:'Rua Calheta',detail:'Cafe',title:'Cafe Calheta',type:'cafe',icotyp:'yellow',lat:"37.0858150589029",long:"-8.731550574302673"},
{address:'Rua Calheta',detail:'Bar',title:'Kellys',type:'bar',icotyp:'red',lat:"37.08583217639933",long:"-8.731239438056945"},
{address:'Rua 2nd Abril',detail:'Bar',title:'Godots',type:'bar',icotyp:'blue',lat:"37.08602046860496",long:"-8.731470108032226"}
];

// translate data type: to icon
function getIcon(type) {
 switch(type) {
    case "bar": return "../mapIcons/mini-blue.png";
    case "restaurant": return "../mapIcons/mini-red.png";
    case "cafe": return "../mapIcons/mini-yellow.png";
    default: return "../mapIcons/mini-white.png";
 }
}

function initialize() {
 var latlng = new google.maps.LatLng(37.08597981464561, -8.730670809745788);
 var myOptions = {
    zoom: 18,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
 map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

   // revised beetroot-beetroot 'loop' function to set markers and sidebar at the same time

var $locs = $("#locs");//Used repeatedly inside the loop.

$.each(data, function(idx, mapData) {
//Note: critical assignment of the new marker as a property of `mapData`.
mapData.marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(mapData.lat,mapData.long),
    title: mapData.title,
    icon: getIcon(mapData.type)
});
var link = '<a href="#"' + mapData.title +'">' + mapData.title + '</a>';
var contentHtml = "<div id='iw' class='iw2'><h3>" + link + "</h3>" + mapData.detail + "<br>" + mapData.address + "</div>";

//What was `marker` must now be referred to as `mapData.marker`
mapData.marker.infowindow = new google.maps.InfoWindow({
    content: contentHtml
});
google.maps.event.addListener(mapData.marker, 'click', function() {
    if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
    //`this` refers back to the clicked element; the appropriate marker
    this.infowindow.open(map, this);
    lastinfowindow = this.infowindow;
});

var spot = '<img src="' + (getIcon(mapData.type)) + '" />';

//Here, it's convenient to create what was `sideitem` as a jQuery object, so we can apply several jquery methods (without making an assignment).
$('<p class="loc" />')
    .html(spot + mapData.title)
    .appendTo($locs)
    .data('mapData', mapData);//<<<<<<<< critical

});

doFilter(); //It should be possible to execute this statement when the loop is finished.

$(document).on("mouseenter", ".loc", function() {
if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
var mapData = $(this).data("mapData");
map.panTo(mapData.marker.getPosition());//<<<< direct reference to the marker avoids the need to loop.
mapData.marker.setIcon(getIcon(''));//get the default icon.
}).on("mouseleave", ".loc", function() {
var mapData = $(this).data("mapData");
mapData.marker.setIcon(getIcon(mapData.type));
}).on("click",".loc",function() {
var mapData = $(this).data("mapData");
mapData.marker.infowindow.open(map, mapData.marker);
 lastinfowindow = mapData.marker.infowindow;
});

/*
Run on every change to any of the checkboxes
*/

 function doFilter() {

if(lastinfowindow && lastinfowindow.close) lastinfowindow.close(); //Close last info windows if still open and new filter applied
     if(!locIndex) {
         locIndex = {};
         //I reverse index markers to figure out the position of loc to marker index
         for(var x=0, len=markers.length; x<len; x++) {
             locIndex[markers[x].locid] = x;
        }
    }

    //what's checked?
    var checked = $("input[type=checkbox]:checked");
    var selTypes = [];
    for(var i=0, len=checked.length; i<len; i++) {
        selTypes.push($(checked[i]).val());
     }
     for(var i=0, len=data.length; i<len; i++) {
        var sideDom = "p.loc[data-locid="+(i+1)+"]";

         //Only hide if length != 0
         if(checked.length !=0 && selTypes.indexOf(data[i].type) < 0) {
             $(sideDom).hide();
            markers[locIndex[i+1]].setVisible(false);
        } else {
             $(sideDom).show();
            markers[locIndex[i+1]].setVisible(true);
        }
    }
}

$(document).on("click", "input[type=checkbox]", doFilter);
}

</script>
<style type="text/css">
#container {width:920px;height:500px; margin-left:auto;margin-right:auto;}

#map_canvas {width: 700px; height: 500px;float:left;border:1px gray solid;margin-right:10px;}

/* sidebar styling */
#locs {margin-top: 0px;padding-top: 0px;margin-left: 5px;height: 500px;width:200px;overflow-y: auto;overflow-x: hidden;}
#locs img {float:left;padding-right:5px;}
.loc {border: 0;width: 200px;padding: 2px;cursor: pointer;margin:0;text-transform:uppercase;font-family:Arial, Helvetica, sans-serif;font-size:0.90em;}

/* checkbox styling */
#form {margin-top: 0px;padding-top: 0px;height: 29px;}
.label {width: 32.5%;margin: 0;padding: 4px 0 4px 4px;display: inline-block;font-family: "Trebuchet MS", Verdana, Arial, sans-serif;text-transform: uppercase;font-size: 0.75em;font-weight: bold;}
.red {color:white;background-color:red;}
.yellow {color:yellow;background-color:black;}
.blue {color:white;background-color:blue;}

/* Map info styling */
#map_canvas div#iw {width:250px;height:65px;overflow:hidden;}
#map_canvas h3 {font-size:1em; margin:0; padding:3px;}
#map_canvas .iw2 a {text-decoration:none;border-bottom:thin blue dashed;}
#map_canvas .iw2 a:hover {text-decoration:none;border-bottom:thin red solid;}
</style>
</head>

<body onLoad="initialize()">
<div id="container">

<div id="map_canvas"></div> <!-- map //-->
<div id="locs"></div> <!-- sidebar //-->

<div id="form" style="margin:0;padding:0;border:thin gray solid;width:910px">
<span class="label blue"><input type="checkbox" name="bars" value="bar">Bars</span>
<span class="label yellow"><input type="checkbox" name="cafes" value="cafe">Cafes</span>
<span class="label red"><input type="checkbox" name="restaurants" value="restaurant">Restaurants</span>
</div>

</div> <!-- end of container //-->
</body>
</html>

编辑3 - 03/07 - 修订初始化标记/侧边栏

// BB - revised  each loop function to set markers and sidebar at the same time

var $locs = $("#locs");//Used repeatedly inside the loop.

$.each(data, function(idx, mapData) {
//BB - Note: critical assignment of the new marker as a property of `mapData`.
    mapData.marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(mapData.lat,mapData.long),
        title: mapData.title,
        icon: getIcon(mapData.type)
    });

var link = '<a href="#"' + mapData.title +'">' + mapData.title + '</a>';
var contentHtml = "<div id='iw' class='iw2'><h3>" + link + "</h3>" + mapData.detail + "<br>" + mapData.address + "</div>";

//What was `marker` must now be referred to as `mapData.marker`
mapData.marker.infowindow = new google.maps.InfoWindow({
    content: contentHtml
});
google.maps.event.addListener(mapData.marker, 'click', function() {
    if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
    //BB - `this` refers back to the clicked element; the appropriate marker
    this.infowindow.open(map, this);
    lastinfowindow = this.infowindow;
});

//BB - Here, it's convenient to create what was `sideitem` as a jQuery object, so we can apply several jquery methods (without making an assignment).
var spot = '<img src="' + (getIcon(mapData.type)) + '" />';
$('<p class="loc" />')
    .html(spot + mapData.title)
    .appendTo($locs)
    .data('mapData', mapData);//<<<<<<<< critical

//BB - At the bottom of the $.each() loop in initialize(), create and populate one array per category, as properties of markers ://
if(!markers[mapData.type]) markers[mapData.type] = [];
markers[mapData.type].push(mapData.marker);
});

// End of for/each loop

编辑4 - 07/07 - 修改完整的评论文字

<script type="text/javascript">
var map;
//var markers = [];
//object, not array. BB
var markers = {};
var lastinfowindow;
//var locIndex;

//Credit: MDN
  if ( !Array.prototype.forEach ) {
    Array.prototype.forEach = function(fn, scope) {
      for(var i = 0, len = this.length; i < len; ++i) {
        fn.call(scope, this[i], i, this);
      }
   }
}

//my data ~ cutdown and local for testing 
var data = [
{address:'Rua Calheta',detail:'South African &amp; Portuguese Restaurant',title:'Dolphin',type:'restaurant',lat:"37.08570947136275",long:"-8.731633722782135"},
{address:'Rua Calheta',detail:'Poruguese Cafe / Bar',title:'Cafe Calheta',type:'cafe',lat:"37.0858150589029",long:"-8.731550574302673"},
{address:'Rua Calheta',detail:'English Bar',title:'Kellys',type:'bar',lat:"37.08583217639933",long:"-8.731239438056945"},
{address:'Rua 2nd Abril',detail:'English Bar',title:'Godots',type:'bar',lat:"37.08602046860496",long:"-8.731470108032226"},
{address:'Rua 2nd Abril',detail:'Chinese Restaurant',title:'Royal Garden',type:'restaurant',lat:"37.086164896968405",long:"-8.731738328933715"},
{address:'Rua 2nd Abril',detail:'English Bar',title:'Clives',type:'bar',lat:"37.086125",long:"-8.731374"},
{address:'Rua 2nd Abril',detail:'English Restaurant',title:'The Lime Tree',type:'restaurant',lat:"37.086125877750365",long:"-8.731588125228881"},
{address:'Praia da Luz',detail:'Portuguese Restaurant',title:'Alloro',type:'restaurant',lat:"37.09158",long:"-8.724850"},
{address:'Rua Calheta',detail:'English Cafe / Bistro',title:'Jakes',type:'cafe',lat:"37.0862601125538",long:"-8.732671737670898"},
{address:'Av dos Pescadores',detail:'English &amp; Portuguese Restaurant',title:'Chaplins',type:'restaurant',lat:"37.08550480361006",long:"-8.730005621910095"},
{address:'Av dos Pescadores',detail:'English &amp; Portuguese Restaurant',title:'Atlantico',type:'restaurant',lat:"37.085425634814705",long:"-8.729941248893737"},
{address:'Av dos Pescadores',detail:'Indian Restaurant',title:'Saffron',type:'restaurant',lat:"37.08534432623613",long:"-8.729884922504425"},
{address:'Av dos Pescadores',detail:'Indian Restaurant',title:'Pashmina',type:'restaurant',lat:"37.08526729697597",long:"-8.729839324951171"},
{address:'Rua Calheta',detail:'English Bar',title:'The Bull',type:'bar',lat:"37.085652442494",long:"-8.73089075088501"},
{address:'Av dos Pescadores',detail:'English &amp; Portuguese Restaurant',title:'Galley',type:'restaurant',lat:"37.08571577732778",long:"-8.729227781295776"},
{address:'Av dos Pescadores',detail:'English &amp; Portuguese Bar',title:'Carlos',type:'bar',lat:"37.0856306176238",long:"-8.729227781295776"}
];

// translate data.type: to icon
function getIcon(type) {
switch(type) {
    case "bar": return "../mapIcons/mini-blue.png";
    case "restaurant": return "../mapIcons/mini-red.png";
    case "cafe": return "../mapIcons/mini-green.png";
    default: return "../mapIcons/mini-white.png"; // used as current selection indicator
    //default: return "../mapIcons/marker-yellow-dot.png"; // will use instead of white later
}
}

function initialize() {
    var latlng = new google.maps.LatLng(37.08597981464561, -8.730670809745788);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

 //-----------------------------------------------------------------------------------------
/*
Start of for/each loop 
*/

var $locs = $("#locs");//Used repeatedly inside the loop.

$.each(data, function(idx, mapData) {
//BB - Note: critical assignment of the new marker as a property of `mapData`.
// section 1 - Marker construct    
     mapData.marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(mapData.lat,mapData.long),
        title: mapData.title,
        icon: getIcon(mapData.type)
    });
// section 1 end

// section 2 - Infowindow construct
    var link = '<a href="#"' + mapData.title +'">' + mapData.title + '</a>'; // make a link of name
    var contentHtml = "<div id='iw' class='iw2'><h3>" + link + "</h3>" + mapData.detail + "</div>"; // style info window and add detail
// What was `marker` must now be referred to as `mapData.marker`
    mapData.marker.infowindow = new google.maps.InfoWindow({
        content: contentHtml,
    });
// section 2 end

// section 3 - Map marker click function
    google.maps.event.addListener(mapData.marker, 'click', function() { 
        if(lastinfowindow && lastinfowindow.close) lastinfowindow.close(); // close any open infowindows
        map.setZoom(18); // zoom in
        map.setCenter(mapData.marker.getPosition());// centre on selection
    //BB - `this` refers back to the clicked element; the appropriate marker
        this.infowindow.open(map, this);  // open infowindow
        lastinfowindow = this.infowindow; // remember for closing this infowindow, if still open when selection changes
    });
// section 3 end

// section 4 - Display Map marker and sidebar item
// BB - Here, it's convenient to create what was `sideitem` as a jQuery object, so we can apply several jquery methods (without making an assignment).
    var spot = '<img src="' + (getIcon(mapData.type)) + '" />'; // sidebar copy of marker for display
    $('<p class="loc" />')
        .html(spot + mapData.title) // sidebar icon and name
        .appendTo($locs) // add to sidebar container
        .data('mapData', mapData);  //<<<<<<<< critical
// BB Remove non matching from sidebar   
        marker.loc = $('<p class="loc" />').addClass(mapData.type).html(spot + mapData.title).data('marker', {m:marker, type:mapData.type}).appendTo($locs).get(0);
// BB - At the bottom of the $.each() loop in initialize(), create and populate one array per category, as properties of markers ://
        if(!markers[mapData.type]) markers[mapData.type] = [];
        markers[mapData.type].push(marker);
});

// End of for/each loop    
//-----------------------------------------------------------------------------------------

} // end of initialise (?)

//-----------------------------------------------------------------------------------------
/*
Sidebar Functions
*/

$(document).on("mouseenter", ".loc", function() {
   //if(lastinfowindow && lastinfowindow.close) lastinfowindow.close(); // moved to on click, avoids closing when accidently moving mouse
      var mapData = $(this).data("mapData");
       map.setZoom(18); // zoom in a bit
       map.setCenter(mapData.marker.getPosition());// centre on selection
     //map.panTo(mapData.marker.getPosition());// direct reference to the marker avoids the need to loop.
       mapData.marker.setIcon(getIcon(''));//get the default icon ie. larger yellow spot.
    }).on("mouseleave", ".loc", function() {
       var mapData = $(this).data("mapData");
       mapData.marker.setIcon(getIcon(mapData.type));//reset marker to correct type
       map.setZoom(17); //rest zoom to default
       map.setCenter(marker.getPosition()); // centre on map middle
    }).on("click", ".loc", function() { // opens corresponding info window on map
       if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
       var mapData = $(this).data("mapData");
     //map.setZoom(19); // zoom in more maybe
       mapData.marker.infowindow.open(map, mapData.marker); // open infowindow
       lastinfowindow = mapData.marker.infowindow; // remember for closing this infowindow, if still open when selection changes
})

//-----------------------------------------------------------------------------------------
/*
Run on every change to any of the checkboxes
*/  

function doFilter() {
    if(lastinfowindow && lastinfowindow.close) lastinfowindow.close(); // close last infowindow if still open
    alert ("filter triggered");
    $("input[type=checkbox]").each(function(i, checkbox) {
        var markersArr = markers[checkbox.value];
        if(markersArr) {
            $.each(markersArr, function(i, marker) {
                marker.loc.style.display = ['none', 'block'][Number(checkbox.checked)]; // don't display non selected types
                marker.setVisible(checkbox.checked); // display selected type(s)
            });
        };
    });
}
   //-----------------------------------------------------------------------------------------
/*
Run on initial setup
*/      
  doFilter();

       //-----------------------------------------------------------------------------------------
/*
fires on every checkbox change
*/

  $("#form").on("click", ".cat", doFilter)

</script>

Answer 1

如果在创建标记的循环中，为每个侧边栏项提供对其标记而不是locid的引用，则无需循环重新发现mouseenter / mouseleave上的标记。

即，而不是设置：

//My best guess at what the statement must be.
thisloc.data("locid", id);
//Keep this line if thisloc.data("locid") is used elsewhere.

设置（在侧栏项/标记创建循环中）：

var marker = ....;
var thisloc = ...;
...
data[i].marker = marker;//add a .marker property to the original dataset.
thisloc.data("itemData", data[i]);//associate the original dataset with the sidebar item

现在，mouseenter / mouseleave处理程序应简化如下：

$(document).on("mouseenter", ".loc", function() {
    if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
    var data = $(this).data("itemData");
    map.panTo(data.marker.getPosition());//<<<< direct reference to the marker avoids the need to loop.
    data.marker.setIcon(getIcon(''));//get the default icon.
}).on("mouseleave", ".loc", function() {
    var data = $(this).data("itemData");
    data.marker.setIcon(getIcon(data.type));
});

注意：您不需要在mouseleave上再次平移到标记。

这应该回答提出的问题和其他优点。

编辑：

好的，现在我已经看过主循环，它可以修改这样的东西，各种各样的mods全部通过：

var $locs = $("#locs");//Used repeatedly inside the loop.

$.each(data, function(idx, mapData) {
    //Note: critical assignment of the new marker as a property of `mapData`.
    mapData.marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(mapData.lat,mapData.long),
        title: mapData.title,
        icon: getIcon(mapData.type)
    });
    var link = '<a href="#"' + mapData.title +'">' + mapData.title + '</a>';
    var contentHtml = "<div id='iw' class='iw2'><h3>" + link + "</h3>" + mapData.detail + "<br>" + mapData.address + "</div>";

    //What was `marker` must now be referred to as `mapData.marker`
    mapData.marker.infowindow = new google.maps.InfoWindow({
        content: contentHtml
    });
    google.maps.event.addListener(mapData.marker, 'click', function() {
        if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
        //`this` refers back to the clicked element; the appropriate marker
        this.infowindow.open(map, this);
        lastinfowindow = this.infowindow;
    });

    var spot = '<img src="' + (getIcon(mapData.type)) + '" />';

    //Here, it's convenient to create what was `sideitem` as a jQuery object, so we can apply several jquery methods (without making an assignment).
    $('<p class="loc" />')
        .html(spot + mapData.title)
        .appendTo($locs)
        .data('mapData', mapData);//<<<<<<<< critical

});
doFilter();//It should be possible to execute this statement when the loop is finished.

相应的mouseenter / mouseleave处理程序将是：

$(document).on("mouseenter", ".loc", function() {
    if(lastinfowindow && lastinfowindow.close) lastinfowindow.close();
    var mapData = $(this).data("mapData");
    map.panTo(mapData.marker.getPosition());//<<<< direct reference to the marker avoids the need to loop.
    mapData.marker.setIcon(getIcon(''));//get the default icon.
}).on("mouseleave", ".loc", function() {
    var mapData = $(this).data("mapData");
    mapData.marker.setIcon(getIcon(mapData.type));
});

所有未经测试，因此可能需要调试。

EDIT2：

我把它留在上面的方式，数组markers没有被填充。现在我已经看到函数doFilter()我可以看到应该填充markers，但是它更方便成为一个对象而不是一个数组。

markers = {};//in the same scope as before

在$.each()的{{1}}循环底部，为每个类别创建并填充一个数组，作为initialize()的属性：

markers

以这种方式填充if(!markers[mapData.type]) markers[mapData.type] = []; markers[mapData.type].push(mapData.marker);，您可以非常简单地识别每个类别中的所有标记，而markers将极大地简化为：

doFilter()

EDIT3

要使侧边栏条目显示/隐藏同意类别控件，function doFilter() { if(lastinfowindow && lastinfowindow.close) lastinfowindow.close(); $("input[type=checkbox]").each(function(i, checkbox) { var markersArr = markers[checkbox.value]; if(markersArr) { $.each(markersArr, function(i, marker) { marker.setVisible(checkbox.checked); }); } }); }应如下所示：

initialize()

Answer 2

markers[i].setIcon("currmark")无效（将图标设置为字符串“currmark”）。使用变量：markers[i].setIcon(currmark)。

$(document).on("mouseleave",".loc",function() {
    var thisloc = $(this).data("locid");
    var currmark = getIcon("mapData.type");
    for(var i=0; i<markers.length; i++) {
        if(markers[i].locid == thisloc) {  //get the latlong
            map.panTo(markers[i].getPosition());
            markers[i].setIcon(currmark);
        }
    }
});

Google地图将标记更改回原始图像

2 个答案:

编辑：

EDIT2：

EDIT3