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

最新推荐文章于 2021-06-03 13:03:42 发布

wuqinglianga

最新推荐文章于 2021-06-03 13:03:42 发布

阅读量1.6k

点赞数

分类专栏： Google Maps JavaScript API V3 实战文章标签： javascript asp.net google api function div

本文链接：https://blog.csdn.net/wuqinglianga/article/details/6010082

版权

Google Maps JavaScript API V3 实战专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

        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" οnclick="overlay.toggle();" />
        <input type="button" value="Toggle DOM Attachment" οnclick="overlay.toggleDOM();" />
    </div>
    <div id="maps">
    </div>
    </form>
</body>
</html>