当前位置: 代码迷 >> Web前端 >> google 地图 v3 使用自定义Marker在map下添加文字标签
  详细解决方案

google 地图 v3 使用自定义Marker在map下添加文字标签

热度:253   发布时间:2012-08-22 09:50:35.0
google map v3 使用自定义Marker在地图上添加文字标签

??????? 网上找了好久都是v2版本,没办法看看api吧。上面只有自定义叠加层,没有发现重写marker的功能。
??? 没办法,就用api的自定义叠加层吧。虽然可以实现带字的标记了,但是它没有marker那么多
的功能,如果

?? 你javascript可以继续填充功能。
??? 使用的时候就调用这句话

overlay = new MyMarker(map,{latlng:new google.maps.LatLng(0, -180),image:"googlemap/images/alarm.gif",clickFun:zoomOut});   
/***************自定义叠加层,可作为站点显示在地图上******************/
    function MyMarker(map, options) {   
      // Now initialize all properties.   
      this.latlng = options.latlng; //设置图标的位置
      this.image_ = options.image;  //设置图标的图片
      this.labelText = options.labelText || '标记';
      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 = this.labelText;
			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.overlayLayer.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();     
			}   
		}
	  }  

?

  相关解决方案