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

2024-06-01 01:21| 来源: 网络整理| 查看: 265

google map默认的标示GMarker，只能使用图片不能使用文字。但是在实际中，我们不可避免的需要在地图上标示文字信息。例如地名等。Google 地图 API 使我们可以通过扩展GMarker实现自定义的GMarker的子类LabelMarker。

1 google.maps.LabelMarker = function (latlng, options) 2 { 3 this.latlng = latlng; 4 this.labelText = options.labelText || '' ; 5 this.labelClass = options.labelClass || 'writeb' ; 6 this.labelOffset = options.labelOffset || new google.maps.Size(8, -33 ); 7 options.icon = options.icon || getTextIcon(); 8 google.maps.Marker.apply(this , arguments); 9 }10 11 google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0 ));12 13 google.maps.LabelMarker.prototype.initialize = function (map){14 google.maps.Marker.prototype.initialize.call(this , map);15 16 var label = document.createElement('div' );17 label.className = this .labelClass;18 label.innerHTML = this .labelText;19 label.style.position = 'absolute' ;20 label.style.width = '48px' ;21 map.getPane(G_MAP_MARKER_PANE).appendChild(label);22 23 this.map = map;24 this.label = label;25 }26 27 google.maps.LabelMarker.prototype.redraw = function (force){28 google.maps.Marker.prototype.redraw.call(this , map);29 30 if(! force)31 {32 return ;33 }34 35 var point = this.map.fromLatLngToDivPixel(this .latlng);36 var z = google.maps.Overlay.getZIndex(this .latlng.lat());37 38 this.label.style.left = (point.x + this.labelOffset.width) + 'px' ;39 this.label.style.top = (point.y + this.labelOffset.height) + 'px' ;40 this.label.style.zIndex = z + 1 ;41 }42 43 google.maps.LabelMarker.prototype.remove = function (){44 this.label.parentNode.removeChild(this .label);45 this.label = null ;46 google.maps.Marker.prototype.remove.call(this );47 }48 49 function getTextIcon()50 {51 var icon = new google.maps.Icon();52 icon.image = "/js/map/img/mapts.gif" ;53 icon.iconSize = new GSize(48, 40 );54 icon.iconAnchor = new GPoint(0, 40 );55 icon.infoWindowAnchor = new GPoint(5, 1 );56 return icon;57 }

在页面上调用的代码：

1 var marker = new google.maps.LabelMarker(map.getCenter(), { 2 labelText:'我在这' 3 });4 5 map.addOverlay(marker);

现在就会在地图上显示我们自定义的GMarker标识了。

http://www.cnblogs.com/hyl8218/archive/2009/12/26/1632524.html

【本文地址】

公司简介

联系我们