google map使用自定义Marker在地图上添加文字标示
2012-08-03 17:03
1046 查看
google map默认的标示GMarker,只能使用图片不能使用文字。但是在实际中,我们不可避免的需要在地图上标示文字信息。例如地名等。Google 地图 API 使我们可以通过扩展GMarker实现自定义的GMarker的子类LabelMarker。
在页面上调用的代码:
1 var marker = new google.maps.LabelMarker(map.getCenter(), {
2 labelText:'我在这'
3 });
4
5 map.addOverlay(marker);
现在就会在地图上显示我们自定义的GMarker标识了。
继承GOverlay的实现自定义GMarker的方法: google map自定义GMarker的方法二
Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 1 google.maps.LabelMarker = function(latlng, options) { this.latlng = latlng; this.labelText = options.labelText || ''; this.labelClass = options.labelClass || 'writeb'; this.labelOffset = options.labelOffset || new google.maps.Size(8, -33); options.icon = options.icon || getTextIcon(); google.maps.Marker.apply(this, arguments); } google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0)); google.maps.LabelMarker.prototype.initialize = function(map){ google.maps.Marker.prototype.initialize.call(this, map); var label = document.createElement('div'); label.className = this.labelClass; label.innerHTML = this.labelText; label.style.position = 'absolute'; label.style.width = '48px'; map.getPane(G_MAP_MARKER_PANE).appendChild(label); this.map = map; this.label = label; } google.maps.LabelMarker.prototype.redraw = function(force){ google.maps.Marker.prototype.redraw.call(this, map); if(!force) { return; } var point = this.map.fromLatLngToDivPixel(this.latlng); var z = google.maps.Overlay.getZIndex(this.latlng.lat()); this.label.style.left = (point.x + this.labelOffset.width) + 'px'; this.label.style.top = (point.y + this.labelOffset.height) + 'px'; this.label.style.zIndex = z + 1; } google.maps.LabelMarker.prototype.remove = function(){ this.label.parentNode.removeChild(this.label); this.label = null; google.maps.Marker.prototype.remove.call(this); } function getTextIcon() { var icon = new google.maps.Icon(); icon.image = "/js/map/img/mapts.gif"; icon.iconSize = new GSize(48, 40); icon.iconAnchor = new GPoint(0, 40); icon.infoWindowAnchor = new GPoint(5, 1); return icon; }
在页面上调用的代码:
1 var marker = new google.maps.LabelMarker(map.getCenter(), {
2 labelText:'我在这'
3 });
4
5 map.addOverlay(marker);
现在就会在地图上显示我们自定义的GMarker标识了。
继承GOverlay的实现自定义GMarker的方法: google map自定义GMarker的方法二
相关文章推荐
- google map使用自定义Marker在地图上添加文字标示
- google map使用自定义Marker在地图上添加文字标签
- Google Maps API:自定义Marker图标,为图标添加文字等信息
- 高德地图自定义Marker显示文字
- C# 使用 GDI+ 给图片添加文字,并使文字自适应矩形区域
- 地图的使用和自定义大头针
- eCharts添加自定义geojson数据实现地图展示
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
- MapKit&CoreLocation基本使用以及地图大头针的添加与个性化
- 说说Android 两种为自定义组件添加属性的使用方法和区别
- google地图marker文字label添加js lib
- 如何对地图服务完美的添加图层,且不影响用户的使用
- 【百度地图】使用LocalSearch获取返回Marker及自定义结果面板
- iOS-高德地图点击地图获取点击点对应的地理位置,并添加自定义的大头针
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
- Android中自定义ImageView添加文字设置按下效果详解
- 瓦片地图学习笔记一 编辑器使用及地图添加,对象层应用
- 在android应用使用自定义的字体显示文字
- Android 百度地图 SDK v3.0.0 (三) 添加覆盖物Marker与InfoWindow的使用