-1

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

我有一个谷歌地图，它从数组中加载数据并填充项目的侧边栏列表。

单击侧边栏项目会按预期打开相应的信息窗口 ok

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

（.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）中的原始图标已被遗忘/替换为应用于标记[i]的最后一个设置。我想我设置时需要重新访问数据集以提醒原始状态的var

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

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

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

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>
4

2 回答 2

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 上再次平移到标记。

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

编辑：

好的，现在我已经看到了主循环，可以像这样修改它，通过各种模块：

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

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

编辑2：

我把它放在上面的方式，数组markers没有被填充。现在我已经看到了应该填充的函数doFilter()，markers但是将其作为对象而不是数组更方便。

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

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

if(!markers[mapData.type]) markers[mapData.type] = [];
markers[mapData.type].push(mapData.marker);

以markers这种方式填充后，您就有了一种非常简单的方法来识别每个类别中的所有标记，doFilter()并将大大简化为：

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

编辑3

要使侧边栏条目显示/隐藏与类别控件的同情，initialize()应如下所示：

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

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

    var marker;
    $.each(data, function(idx, mapData) {
        //Note: critical assignment of the new marker as a property of `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>";

        marker.infowindow = new google.maps.InfoWindow({
            content: contentHtml
        });
        google.maps.event.addListener(marker, 'click', function() {
            closeLastInfoWindow();
            //`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.
        marker.loc = $('<p class="loc" />')
            .addClass(mapData.type)
            .html(spot + mapData.title)
            .data('marker', {m:marker, type:mapData.type})
            .appendTo($locs).get(0);
        if(!markers[mapData.type]) markers[mapData.type] = [];
            markers[mapData.type].push(marker);
    });

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

    doFilter();
}
于 2013-06-30T19:14:34.863 回答
0

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);
        }
    }
});
于 2013-06-30T14:56:19.360 回答