您的位置：首页 > Web前端 > JavaScript

ASP.NET Google Maps Javascript API V3 实战基础篇一隐藏和显示叠加层

2010-11-15 14:33 387 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航