GoogleMapsV3-----基础地图(自定义消息提示OverlayView)
2013-01-24 09:24
330 查看
<html><head><title></title> <title></title> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { height: 80%; } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.9&sensor=false®ion=cn"> </script> <script type="text/javascript"> var map = null; var myLableMessage = null; //【初始化地图】 //=========================================================================================================================== function initialize() { //构建经纬度点 var latlng = new google.maps.LatLng(30.277925, 120.177597); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } //【自定义OverlayView】 //=========================================================================================================================== function myLable(latlng, text, map) { this.latlng_ = latlng; this.text_ = text; this.map_ = map; this.div_ = null; this.setMap(map); } myLable.prototype = new google.maps.OverlayView(); //您应当继承此类,方法是将叠加层的 prototype 设置为 new OverlayView.prototype //必须实现三个方法,即 onAdd()、draw() 和 onRemove()。在 draw() 方法中,应放置这些元素。 //在 add() 方法中,您应当创建 DOM 对象,并将其作为窗格的子对象附加。调用有效地图对象的.setMap() myLable.prototype.onAdd = function () { var div = document.createElement('DIV'); div.style.border = "none"; div.style.borderWidth = "0px"; div.style.position = "absolute"; div.innerHTML = this.text_; this.div_ = div; var panes = this.getPanes(); panes.floatPane.appendChild(div); ; } //每当地图属性更改时都会调用 draw() 方法,该方法可以更改元素的位置,如缩放、中心或地图类型。 myLable.prototype.draw = function () { var overlayProjection = this.getProjection(); var position = overlayProjection.fromLatLngToDivPixel(this.latlng_); var div = this.div_; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; div.style.width = '100px'; div.style.background = "#ffffff"; div.style.border = "1px solid #85a5b4"; } //在 onRemove() 方法中,应将对象从 DOM 中删除。清除时调用有效地图对象的.setMap(null) myLable.prototype.onRemove = function () { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } //=========================================================================================== function LableMessage() { var lat = document.getElementById("lat_text").value; var lng = document.getElementById("lng_text").value; var text = document.getElementById("content_text").value; var latlng = new google.maps.LatLng(parseFloat(lng), parseFloat(lat)); //如果myLableMessage不为null,则清除原来的 if (myLableMessage != null) { myLableMessage.setMap(null); myLableMessage = null; } //调用自定义OverlayView myLableMessage = new myLable(latlng, text, map); } function ClearLableMessage() { if (myLableMessage != null) { myLableMessage.setMap(null); myLableMessage = null; } } </script></head><body onload="initialize()"> <div id="map_canvas" style="width: 80%; height: 100%; float: left;"> </div> <div id="Div1" style="width: 20%; height: 100%; overflow: scroll;"> <hr /> <p style="text-align: center;"> 维度:<input type="text" id="lat_text"/><br /> 经度:<input type="text" id="lng_text"/><br /> 标签内容:<input type="text" id="content_text"/><br /> <input type="button" onclick="LableMessage()" value="确定" /> <input type="button" onclick="ClearLableMessage()" value="清除"/> </p> </div></body></html>
相关文章推荐
- GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)
- Android自定义未读消息提示View
- [Android开发] 自定义View之消息数量提示View-TipView
- android自定义tabbar,并带badgeview消息提示
- 仿微信消息数目提示的自定义view
- 自定义view实现未读消息提示(小红点)
- android自定义tabbar,并带badgeview消息提示
- Android 自定义View之消息提示控件
- 安卓Toast显示提示消息(自定义view,根据子线程消息显示提示)
- UI基础第十四弹:UItableview使用xib自定义团购页面
- Android自定义小红点消息提示
- 自定义View精炼详解第(一)课:基础理论部分和简单小实现
- Android 自定义view基础(三)
- android自定义View基础系列一(模仿365日历PC版加载动画)
- 自定义View-基础
- android 自定义view基础知识
- 自定义View基础 (1)
- Android 自定义View基础-View的测量
- 自定义Field 级别的错误提示消息
- 笔记—自定义View之绘制基础