<!DOCTYPE html
> <html> <head> <meta name=
"viewport" content=
"initial-scale=1.0, user-scalable=no" /> <style type=
"text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }
</style> <script src=
"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type=
"text/javascript"> function initialize() { var
mapOptions = { center: new google.maps.LatLng(31.397, 117.644), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var
map =
new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var
overlay =
new MyMarker(map,{latlng:new google.maps.LatLng(31.397, 117.644),clickFun:zoomOut}); } function zoomOut(){ alert(3333); } /***************自定义叠加层，可作为站点显示在地图上******************/ function MyMarker(map, options) { // Now initialize all properties.
this.latlng =
options.latlng; //设置图标的位置
this.image_ =
options.image; //设置图标的图片
this.labelText =
options.labelText || 'dd';
this.labelClass =
options.labelClass || 'shadow';//设置文字的样式
this.clickFun =
options.clickFun ;//注册点击事件 //
this.labelOffset =
options.labelOffset || new google.maps.Size(8, -33);
this.map_ =
map;
this.div_ =
null; // Explicitly call setMap() on this overlay this.setMap(map); }
MyMarker.prototype =
new google.maps.OverlayView(); //初始化图标
MyMarker.prototype.onAdd =
function() { // Note: an overlay's receipt of onAdd() indicates that // the map's panes are now available for attaching // the overlay to the map via the DOM. // Create the DIV and set some basic attributes. var
div =
document.createElement('DIV'); //创建存放图片和文字的div
div.style.border =
"none";
div.style.borderWidth =
"0px";
div.style.position =
"absolute";
div.style.cursor =
"hand";
div.onclick =
this.clickFun ||function(){};//注册click事件，没有定义就为空函数 // Create an IMG element and attach it to the DIV. var
img =
document.createElement("img"); //创建图片元素
img.src =
this.image_;
img.style.width =
"100%";
img.style.height =
"100%"; //初始化文字标签 var
label =
document.createElement('div');//创建文字标签
label.className =
this.labelClass;
label.innerHTML =
'<a οnclick="zoomOut()" href="#">'+this.labelText+'
</a>';
label.style.position =
'absolute';
label.style.width =
'200px'; //
label.style.fontWeight =
"bold";
label.style.textAlign =
'left';
label.style.padding =
"2px";
label.style.fontSize =
"10px"; //
label.style.fontFamily =
"Courier New"; div.appendChild(img); div.appendChild(label);
this.div_ =
div; // We add an overlay to a map via one of the map's panes. // We'll add this overlay to the overlayImage pane. var
panes =
this.getPanes(); panes.overlayMouseTarget.appendChild(div); } //绘制图标，主要用于控制图标的位置
MyMarker.prototype.draw =
function() { // Size and position the overlay. We use a southwest and northeast // position of the overlay to peg it to the correct position and size. // We need to retrieve the projection from this overlay to do this. var
overlayProjection =
this.getProjection(); // Retrieve the southwest and northeast coordinates of this overlay // in latlngs and convert them to pixels coordinates. // We'll use these coordinates to resize the DIV. var
position =
overlayProjection.fromLatLngToDivPixel(this.latlng); //将地理坐标转换成屏幕坐标 // var
ne =
overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); // Resize the image's DIV to fit the indicated dimensions. var
div =
this.div_;
div.style.left =
position.x-5 + 'px';
div.style.top =
position.y-5 + 'px'; //控制图标的大小
div.style.width =
'10px';
div.style.height =
'10px'; }
MyMarker.prototype.onRemove =
function() { this.div_.parentNode.removeChild(this.div_);
this.div_ =
null; } //Note that the visibility property must be a string enclosed in quotes
MyMarker.prototype.hide =
function() { if (this.div_) {
this.div_.style.visibility =
"hidden"; } }
MyMarker.prototype.show =
function() { if (this.div_) {
this.div_.style.visibility =
"visible"; } } //显示或隐藏图标
MyMarker.prototype.toggle =
function() { if (this.div_) { if (
this.div_.style.visibility == "hidden") { this.show(); } else { this.hide(); } } }
</script> </head> <body onload=
"initialize()"> <div id=
"map_canvas" style=
"width:100%; height:100%"></div> </body> </html>
