在做googlemap的時候,一般會要求有標記(maker),點擊標記或者鼠標移上去會顯示信息框(infowindow),但google自帶的maker只能自己定義圖片
不能改變圖片里的內容,如下圖,顯示錢數,infowindow雖然能夠自定義內部的html代碼,但外部邊框,還是不能改變,這樣就不能達到自己想要的效果.
這樣我們就要用到谷歌地圖的自定義疊加層(OverlayView)
參考地址:https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-cn#CustomOverlays
代碼如下..
var map;
var lastpointer=""; //記錄那個大的類似infowindow的div的id
var lastpointer1=""; //記錄類似maker的div的id
var categoryid='<%=CategoryID %>';
jq(document).ready(function () {
initialize("<%=midx %>", "<%=midy %>");//<%=midx %>,<%=midy %>這兩個是從后台取的值
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
//添加監聽,當中心坐標,縮放比例變化時,類似的infowindow隱藏
google.maps.event.addListener(map, 'zoom_changed', function() {
if(lastpointer!="")
{
jq(lastpointer).hide();
}
});
google.maps.event.addListener(map, 'center_changed', function() {
if(lastpointer!="")
{
jq(lastpointer).hide();
}
});
//下面是循環添加疊加層
<% for (int j = 0; j <_mapList.Count ; j++) { %>
if (<%=_mapList[j].xcoord%>!='null'&&<%=_mapList[j].xcoord%>!=''&&<%=_mapList[j].ycoord%>!='null'&&<%=_mapList[j].ycoord%>!=''&&<%=_mapList[j].ycoord%>!=null&&<%=_mapList[j].xcoord%>!=null){
addSite(map,<%=j %>,'<% =_mapList[j].simpleprice%>',<%=_mapList[j].xcoord %>,<%=_mapList[j].ycoord %>,"<%=_mapList[j].comerce %>","<%=_mapList[j].detailurl %>","<%=_mapList[j].projname %>","<%=_mapList[j].titleimg %>","<%=_mapList[j].livearea %>","<%=_mapList[j].cretetime %>","<%=_mapList[j].pricermb %>");
}
<% }%>
}
//添加疊加層的方法
function addSite(map, siteCode, siteDesc, lat, lng, address,url,projectname,picurl,livearea,createtime,price) {
var pt = new google.maps.LatLng(lat,lng);
//這實例化一個疊加層
var label = new ELabel(map,
pt,
'<div class="SearchMapCityIco" onmouseout="showinfo2('+siteCode+',this)" id="m'+siteCode+'" onmouseover="showinfo('+siteCode+',this)" ><a class="CityIco">'+siteDesc+'</a>'+
'<div id="houseinfo'+siteCode+'" style="position: absolute; display:none;" class="SearchMapBox">'+
'<div class="SearchMapBoxTit">'+
'<a href="'+url+'" target="_blank">'+projectname+'</a></div>'+
'<div class="SearchMapBoxTxt clearfix">'+
'<div class="SearchMapBoxTxtImg">'+
'<a href="'+url+'" target="_blank">'+
'<img width="70" height="47" alt="" src="'+picurl+'"></a></div>'+
'<div class="SearchMapBoxTxtImgR">'+
'<p class="Color999">'+
'<span>'+livearea+' </span><span class="PL20">'+createtime+'</span></p>'+
'<p class="Color999">'+address+
'</p>'+
'<p class="FwB ColorBlack">'+price+
'</p>'+
'</div>'+
'</div>'+
'<div class="SearchMapBoxJianTou">'+
'<span>◆</span> <b>◆</b>'+
'</div>'+
'</div>'
+'<\/div>',
'', // null
new google.maps.Size(-15,9)
);
label.setMap(map);//在地圖上添加疊加層
}
//鼠標的mouseover方法,顯示類似infowindow信息
function showinfo(code,obj)
{
if(lastpointer!="")
{
jq(lastpointer).hide();
jq(lastpointer1).removeClass("ColorYellowBg");
}
jq("#houseinfo"+code).show();
lastpointer="#houseinfo"+code;
lastpointer1="#m"+code;
jq("#m"+code).addClass("ColorYellowBg");
jq("#m"+code).parent().parent().addClass("ColorYellowBg1").siblings().removeClass("ColorYellowBg1");
}
//鼠標mouseout方法,隱藏
function showinfo2(code,obj)
{
if(lastpointer!="")
{
jq(lastpointer).hide();
jq("#m"+code).removeClass("ColorYellowBg");
}
jq("#m"+code).removeClass("ColorYellowBg");
}
下面是Elable的js內容,從網上找的,忘了下載地址了.coding by Mike Williams
function ELabel(map, point, html, classname, pixelOffset, percentOpacity, overlap) {
this.div_ = null;
this.map_ = map;
this.point = point;
this.html = html;
this.classname = classname || "";
this.pixelOffset = pixelOffset || new google.maps.Size(0, 0);
if (percentOpacity) {
if (percentOpacity < 0) percentOpacity = 0;
if (percentOpacity > 100) percentOpacity = 100;
}
this.percentOpacity = percentOpacity;
this.overlap = overlap || false;
this.hidden = false;
}
ELabel.prototype = new google.maps.OverlayView();
ELabel.prototype.onAdd = function () {
var div = document.createElement("div");
div.style.position = "absolute";
div.innerHTML = '<div class=" + this.classname + ">' + this.html + '</div>';
this.div_ = div;
if (this.percentOpacity) {
if (typeof (div.style.filter) == 'string') { div.style.filter = 'alpha(opacity:' + this.percentOpacity + ')'; }
if (typeof (div.style.KHTMLOpacity) == 'string') { div.style.KHTMLOpacity = this.percentOpacity / 100; }
if (typeof (div.style.MozOpacity) == 'string') { div.style.MozOpacity = this.percentOpacity / 100; }
if (typeof (div.style.opacity) == 'string') { div.style.opacity = this.percentOpacity / 100; }
}
if (this.overlap) {
// you may need to work on this "hack" to replace V2 getZindex
// GOverlay.getZIndex(this.point.lat());
var z = 1000 * (90 - this.point.lat());
this.div_.style.zIndex = parseInt(z);
}
if (this.hidden) {
this.hide();
}
// add ourselves to the shadow overlay layer
var panes = this.getPanes();
panes.floatShadow.appendChild(div);
}
ELabel.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
}
ELabel.prototype.draw = function (force) {
var proj = this.getProjection();
var p = proj.fromLatLngToDivPixel(this.point);
var h = parseInt(this.div_.clientHeight);
this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
this.div_.style.top = (p.y + this.pixelOffset.height - h) + "px";
}
ELabel.prototype.show = function () {
if (this.div_) {
this.div_.style.display = "";
this.redraw();
}
this.hidden = false;
}
ELabel.prototype.hide = function () {
if (this.div_) {
this.div_.style.display = "none";
}
this.hidden = true;
}
ELabel.prototype.copy = function () {
return new ELabel(this.point, this.html, this.classname, this.pixelOffset, this.percentOpacity, this.overlap);
}
ELabel.prototype.isHidden = function () {
return this.hidden;
}
ELabel.prototype.supportsHide = function () {
return true;
}
ELabel.prototype.setContents = function (html) {
this.html = html;
this.div_.innerHTML = '<div class=" + this.classname + ">' + this.html + '</div>';
this.redraw(true);
}
ELabel.prototype.setPoint = function (point) {
this.point = point;
if (this.overlap) {
var z = GOverlay.getZIndex(this.point.lat());
this.div_.style.zIndex = z;
}
this.redraw(true);
}
ELabel.prototype.setOpacity = function (percentOpacity) {
if (percentOpacity) {
if (percentOpacity < 0) { percentOpacity = 0; }
if (percentOpacity > 100) { percentOpacity = 100; }
}
this.percentOpacity = percentOpacity;
if (this.percentOpacity) {
if (typeof (this.div_.style.filter) == 'string') { this.div_.style.filter = 'alpha(opacity:' + this.percentOpacity + ')'; }
if (typeof (this.div_.style.KHTMLOpacity) == 'string') { this.div_.style.KHTMLOpacity = this.percentOpacity / 100; }
if (typeof (this.div_.style.MozOpacity) == 'string') { this.div_.style.MozOpacity = this.percentOpacity / 100; }
if (typeof (this.div_.style.opacity) == 'string') { this.div_.style.opacity = this.percentOpacity / 100; }
}
}
ELabel.prototype.getPoint = function () {
return this.point;
}
ELabel.prototype.redraw = function (force) {
var proj = this.getProjection();
var p = proj.fromLatLngToDivPixel(this.point);
var h = parseInt(this.div_.clientHeight);
this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
this.div_.style.top = (p.y + this.pixelOffset.height - h) + "px";
}