我的Google Maps javascript代码出现问题。 我是一个新手,并且认为我有一个游戏,我拼凑了来自几个不同来源的代码来形成这个:
var map;
var markers = [];
var lastinfowindow;
var locIndex;
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);
}
}
}
var data = [
{address:'5-7 Knowsley St Bolton BL1 2AQ',title:'McDonalds',type:'mcdonalds'},
{address:'Waters Meeting Rd Bolton BL1 8TT',title:'McDonalds',type:'mcdonalds'},
{address:'1011 Chorley Old Rd Bolton BL1 5SX',title:'McDonalds',type:'mcdonalds'},
{address:'93 Derby St Bolton BL3 6HH',title:'McDonalds',type:'mcdonalds'},
{address:'Middlebrook Retail Park Horwich Bolton BL6 6JA',title:'McDonalds',type:'mcdonalds'},
{address:'Springfield Bolton BL2 1HY',title:'Burger King',type:'burgerKing'},
{address:'85 Derby St Bolton BL3 6HE',title:'KFC',type:'kfc'},
{address:'The Linkway Horwich Bolton BL6 6JA',title:'KFC',type:'kfc'},
{address:'Waters Meeting Road The Valley Bolton BL1 8TT',title:'KFC',type:'kfc'},
{address:'Middlebrook Retail Park Horwich Bolton BL6 6JA',title:'Subway',type:'subway'},
{address:'46A Newport St Bolton BL1 1NB',title:'Subway',type:'subway'},
{address:'Unit 4C Burnden Park Manchester Rd Bolton BL3 2QS',title:'Subway',type:'subway'},
{address:'Bolton Gate Retail Park Turton St Bolton BL1 2EX',title:'Pizza Hut',type:'pizzaHut'},
{address:'Middlebrook Retail Park Horwich Bolton BL6 6JA',title:'Pizza Hut',type:'pizzaHut'},
{address:'39 Derby St Bolton BL3 6HE',title:'Dominos Pizza',type:'dominos'},
{address:'Unit 5B Oxford St Bolton BL1 1RD',title:'Costa',type:'costa'},
{address:'32-36 Deansgate Bolton BL1 1BL',title:'Costa',type:'costa'},
{address:'Market St Bolton BL1 2AR',title:'Costa',type:'costa'},
{address:'Market Hall Bolton, Lancashire BL1 2AR',title:'Starbucks',type:'starbucks'}
];
function getIcon(type) {
switch(type) {
case "mcdonalds": return "images/icons/mcdonalds.png";
case "burgerKing": return "images/icons/burgerKing.png";
case "pizzaHut": return "images/icons/pizzaHut.png";
case "dominos": return "images/icons/dominos.png";
case "subway": return "images/icons/subway.png";
case "kfc": return "images/icons/kfc.png";
case "starbucks": return "images/icons/starbucks.png";
case "costa": return "images/icons/costa.png";
default: return "images/icons/default.png";
}
}
function initialize() {
var latlng = new google.maps.LatLng(53.584526, -2.429134);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
geocoder = new google.maps.Geocoder();
data.forEach(function(mapData,idx) {
geocoder.geocode( { 'address': mapData.address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
draggable:true,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location,
title: mapData.title,
icon: getIcon(mapData.type)
});
var contentHtml = "<div style='width:300px;height:100px'><h3>"+mapData.title+"</h3>"+mapData.address+"<p></div>";
var infowindow = new google.maps.InfoWindow({
content: contentHtml
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.locid = idx+1;
marker.infowindow = infowindow;
markers[markers.length] = marker;
var sideHtml = '<p class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>';
sideHtml += mapData.address + '</p>';
$("#locs").append(sideHtml);
if(markers.length == data.length) doFilter();
} else {
}
});
});
$(document).on("click",".loc",function() {
var thisloc = $(this).data("locid");
for(var i=0; i<markers.length; i++) {
if(markers[i].locid == thisloc) {
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
function doFilter() {
if(!locIndex) {
locIndex = {};
for(var x=0, len=markers.length; x<len; x++) {
locIndex[markers[x].locid] = x;
}
}
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)+"]";
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);
}
基本上,它没有正常运作。 我希望它在加载时不显示任何标记,然后仅显示用户通过页面上选中的复选框选择的标记。我的几个复选框都不起作用,偶尔点击一个复选框,它们全部显示或者根本不显示:( 我有没有明显的错误? 有人能指出我正确的方向吗?