GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)
<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;">
最新文章
- 【Avalon】factory
- 手动搭建SpringMVC报错
- datatables条件判断列显示还是隐藏
- 强行替换exe图标的方法
- JSP连接数据库的两种方式:Jdbc-Odbc桥和Jdbc直连(转)
- [百度空间] [转]将程序移植到64位Windows
- Tomcat目录结构
- 从ASP.NET的web1子界面刷新打开web1的web0父界面
- 导出cluster log
- 使用httpclient抓取时,netstat 发现很多time_wait连接
- Open-Falcon第三步安装Agent (小米开源互联网企业级监控系统)
- ASP.NET没有魔法——ASP.NET MVC Razor与View渲染
- Gitlab源码库里代码提交后,如何触发jenkins自动构建?
- linux 如何截取一段时间内log日志
- virtualenvwrappers pipreqs 踩坑
- C#中获取文件信息的代码
- storm学习总结
- Codeforces Gym100543B 计算几何 凸包 线段树 二分/三分 卡常
- input不可编辑且颜色不变
- 【Linux】字符转换命令col