ASP.NET Google Maps Javascript API V3 实战基础篇一隐藏和显示叠加层
来源:互联网 发布:python输入输出文件 编辑:程序博客网 时间:2024/05/06 16:25
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Overlay_HideShow.aspx.cs"
Inherits="Samples.Overlays.Overlay_HideShow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>隐藏和显示叠加层</title>
<style type="text/css">
#maps
{
height: 450px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script language="javascript" type="text/javascript">
var overlay; //申明叠加层对象
USGSOverlay.prototype = new google.maps.OverlayView(); //实例化叠加层对象
//地图初始化函数
function initialize() {
var LatLng = new google.maps.LatLng(62.323907, -150.109291);
var Options = {
zoom: 11, center: LatLng, mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("maps"), Options);
var swBound = new google.maps.LatLng(62.281819, -150.287132);
var neBound = new google.maps.LatLng(62.400471, -150.005608);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = "../images/china.png";
//实例化叠加层次对象并绑定到地图上
overlay = new USGSOverlay(bounds, srcImage, map);
}
//实例化叠加层对象函数
function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
//创建叠加层DIV
USGSOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of add() 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.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
// 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%";
div.appendChild(img);
// Set the overlay's div_ property to this DIV
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();
//将创建的地图div添加到地图面板中
panes.overlayImage.appendChild(this.div_);
}
//在地图上画出叠成层
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = (ne.x - sw.x) + "px";
div.style.height = (sw.y - ne.y) + "px";
}
//删除叠加层
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
}
//隐藏叠加层
USGSOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
//显示叠加层
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
//如果叠加层是隐藏状态就改变为显示,如果已经是显示状态则改为隐藏状态
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
}
else {
this.hide();
}
}
}
//如果叠加层对象已经在地图上存在就删除,如果不存在则重新创建
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
}
else {
this.setMap(this.map_);
}
}
//将地图初始化函数绑定到window的load事件
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="toolbar" style="text-align: center">
<input type="button" value="Toggle Visibility" onclick="overlay.toggle();" />
<input type="button" value="Toggle DOM Attachment" onclick="overlay.toggleDOM();" />
</div>
<div id="maps">
</div>
</form>
</body>
</html>
- ASP.NET Google Maps Javascript API V3 实战基础篇一隐藏和显示叠加层
- ASP.NET Google Maps Javascript API V3 实战基础篇一叠加层显示控制
- ASP.NET Google Maps Javascript API V3 实战基础篇一添加叠加层
- ASP.NET Google Maps Javascript API V3 实战基础篇一叠加层地图
- ASP.NET Google Maps Javascript API V3 实战基础篇一KML 和 GeoRSS 图层
- ASP.NET Google Maps Javascript API V3 实战基础篇一路况图层
- ASP.NET Google Maps Javascript API V3 实战基础篇一自行车图层
- ASP.NET Google Maps Javascript API V3 实战基础篇一简单显示地图
- ASP.NET Google Maps Javascript API V3 实战基础篇一根据指定KML构造图层
- ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置
- ASP.NET Google Maps Javascript API V3 实战基础篇一语言本地化
- ASP.NET Google Maps Javascript API V3 实战基础篇一地图事件
- ASP.NET Google Maps Javascript API V3 实战基础篇一访问用户界面事件中的参数
- ASP.NET Google Maps Javascript API V3 实战基础篇一停用默认用户界面
- ASP.NET Google Maps Javascript API V3 实战基础篇一控件选项
- ASP.NET Google Maps Javascript API V3 实战基础篇一控件定位
- ASP.NET Google Maps Javascript API V3 实战基础篇一自定义控件示例
- ASP.NET Google Maps Javascript API V3 实战基础篇一为控件添加状态
- 毕业设计
- sharepoint 列表文件夹的基本操作(添、删、改、查)
- mtk添加项目
- 现在一切都好
- Hibernate Tools with Eclipse
- ASP.NET Google Maps Javascript API V3 实战基础篇一隐藏和显示叠加层
- Linus`s Quotations【copy from baidu.baike】
- 亚运会
- java实现naive scaler算法(第一个版本)
- 20个开发人员非常有用的Java功能代码
- flex拖拽DataGrid行数据显示到chart中的效果例子
- 键盘虚拟键值编码表 使用keybd_event
- Config log4j to print SOAP content with AXIS2
- 『AlisoftRD』[SD2.0大会]开放平台沙龙:平台化的原因