我有一个简单的位置(Location)
类,用于处理所有与标记(Marker)相关的事情。下面是我的代码,供您查看。
最后一行(或几行)实际上是创建标记对象的代码。它循环遍历我的位置(JSON格式),看起来像这样:
{"locationID":"98","name":"Bergqvist Järn","note":null,"type":"retail","address":"Smidesvägen 3","zipcode":"69633","city":"Askersund","country":"Sverige","phone":"0583-120 35","fax":null,"email":null,"url":"www.bergqvist-jb.com","lat":"58.891079","lng":"14.917371","contact":null,"rating":"0","distance":"45.666885421019"}
这里是代码:
如果您查看我的 Location 类中的 target()
方法,您会发现我保留了指向信息窗口的引用,并且可以通过引用轻松地 open()
和 close()
它们。
可查看在线演示:http://ww1.arbesko.com/en/locator/(输入瑞典城市名称,例如斯德哥尔摩,然后按回车键)
var Location = function() {
var self = this,
args = arguments;
self.init.apply(self, args);
};
Location.prototype = {
init: function(location, map) {
var self = this;
for (f in location) { self[f] = location[f]; }
self.map = map;
self.id = self.locationID;
var ratings = ['bronze', 'silver', 'gold'],
random = Math.floor(3*Math.random());
self.rating_class = 'blue';
self.point = new google.maps.LatLng(parseFloat(self.lat), parseFloat(self.lng));
locator.bounds.extend(self.point);
self.marker = new google.maps.Marker({
position: self.point,
title: self.name,
icon: new google.maps.MarkerImage('/wp-content/themes/arbesko/img/locator/'+self.rating_class+'SmallMarker.png'),
shadow: new google.maps.MarkerImage(
'/wp-content/themes/arbesko/img/locator/smallMarkerShadow.png',
new google.maps.Size(52, 18),
new google.maps.Point(0, 0),
new google.maps.Point(19, 14)
)
});
google.maps.event.addListener(self.marker, 'click', function() {
self.target('map');
});
google.maps.event.addListener(self.marker, 'mouseover', function() {
self.sidebarItem().mouseover();
});
google.maps.event.addListener(self.marker, 'mouseout', function() {
self.sidebarItem().mouseout();
});
var infocontent = Array(
'<div class="locationInfo">',
'<span class="locName br">'+self.name+'</span>',
'<span class="locAddress br">',
self.address+'<br/>'+self.zipcode+' '+self.city+' '+self.country,
'</span>',
'<span class="locContact br">'
);
if (self.phone) {
infocontent.push('<span class="item br locPhone">'+self.phone+'</span>');
}
if (self.url) {
infocontent.push('<span class="item br locURL"><a href="http://'+self.url+'">'+self.url+'</a></span>');
}
if (self.email) {
infocontent.push('<span class="item br locEmail"><a href="mailto:'+self.email+'">Email</a></span>');
}
infocontent.push('</span>');
infocontent.push('<span class="item br locPosition"><strong>Lat:</strong> '+self.lat+'<br/><strong>Lng:</strong> '+self.lng+'</span>');
self.infowindow = new google.maps.InfoWindow({
content: infocontent.join(""),
position: self.point,
pixelOffset: new google.maps.Size(0, -15)
});
},
addToMap: function() {
var self = this;
self.marker.setMap(self.map);
},
sidebarItem: function() {
var self = this;
if (self.sidebar) {
return self.sidebar;
}
var li = $('<li/>').attr({ 'class': 'location', 'id': 'location-'+self.id }),
name = $('<span/>').attr('class', 'locationName').html(self.name).appendTo(li),
address = $('<span/>').attr('class', 'locationAddress').html(self.address+' <br/> '+self.zipcode+' '+self.city+' '+self.country).appendTo(li);
li.addClass(self.rating_class);
li.bind('click', function(event) {
self.target();
});
self.sidebar = li;
return li;
},
target: function(type) {
var self = this;
if (locator.targeted) {
locator.targeted.infowindow.close();
}
locator.targeted = this;
if (type != 'map') {
self.map.panTo(self.point);
self.map.setZoom(14);
};
self.infowindow.open(self.map);
}
};
for (var i=0; i < locations.length; i++) {
var location = new Location(locations[i], self.map);
self.locations.push(location);
self.location_ul.append(location.sidebarItem());
location.addToMap();
};
this
上的信息:google.maps.event.addListener(yourMarker, 'click', function (event) { console.log(this); });
- Mayeenul Islam