google map v 3カスタムマーカーを使って地図にテキストラベルを追加します.

4866 ワード

インターネットで長い間探しましたが、v 2バージョンですので、アプリを見てみられませんか?上にはカスタム重畳層しかありません.マーカーを書き換える機能はありません.    仕方がないです.アプリのカスタム重畳を使いましょう.字付きの表記が可能ですが、マーカーほど多くの機能がありません.
   あなたの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();     
			}   
		}
	  }