首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-08-22 
google map v3 使用自定义Marker在地图上添加文字标签??????? 网上找了好久都是v2版本,没办法看看api吧。上

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

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

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

/***************自定义叠加层,可作为站点显示在地图上******************/    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'); //创建存放图片和文字的divdiv.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();     }   }  }  

?

热点排行