谷歌地图在地图上添加文字标注
2013-11-04 14:28
465 查看
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(31.397, 117.644), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var overlay = new MyMarker(map,{latlng:new google.maps.LatLng(31.397, 117.644),clickFun:zoomOut}); } function zoomOut(){ alert(3333); } /***************自定义叠加层,可作为站点显示在地图上******************/ function MyMarker(map, options) { // Now initialize all properties. this.latlng = options.latlng; //设置图标的位置 this.image_ = options.image; //设置图标的图片 this.labelText = options.labelText || 'dd'; 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 = '<a onclick="zoomOut()" href="#">'+this.labelText+'</a>'; 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.overlayMouseTarget.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(); } } } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
相关文章推荐
- 谷歌地图在地图上添加文字标注
- arcgis api for javascrpit 在地图上标注文字。
- google map使用自定义Marker在地图上添加文字标示
- Google map 搜索+点击地图添加标注点 并且返回坐标
- js 调用百度地图api并在地图上进行打点添加标注
- supermap学习系列(七)——用户自己在地图上添加点、线、面标注
- 百度地图BMap无法添加文字标注(textmarker)
- 解决arcgis api自定义给FeatureLayer添加文字标注(label)
- google 地图,添加文本标注,可提交到数据库(更新,删除,修改)
- MapObject学习笔记-第三讲 图层标注、图层控制和电子地图常用工具开发(添加经过修正与VS2005兼容的Legend控件下载)
- 如何使用百度地图API在地图上批量添加点标注
- js 调用百度地图api,并在地图上进行打点,添加标注
- 根据坐标在地图上添加点、标注及热力图(百度地图API)
- ArcGIS API for JavaScript在地图上添加一个标注图标
- 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍
- google map使用自定义Marker在地图上添加文字标示
- 【百度地图API】如何在地图上添加标注
- google map使用自定义Marker在地图上添加文字标签
- 删除当前地图上已经添加的标注数组报错
- 不在可视区域,重新创建地图,添加标注