ASP.NET Google Maps Javascript API V3 实战基础篇一叠加层显示控制

最新推荐文章于 2019-06-11 16:16:24 发布

wuqinglianga

最新推荐文章于 2019-06-11 16:16:24 发布

阅读量1k

点赞数

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

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

版权

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

31 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Overlay_Remove.aspx.cs"
Inherits="Samples.Overlays.Overlay_Remove" %>

<!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 map;     //申明地图对象
        var markersArray = [];     //申明叠加层对象数组
        //地图初始化函数
        function initialize() {
            var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
            var Options = { zoom: 12, center: haightAshbury, mapTypeId: google.maps.MapTypeId.TERRAIN };
            map = new google.maps.Map(document.getElementById("maps"), Options);
            //绑定地图Click事件，单击地图时，在单击处添加叠加层
            google.maps.event.addListener(map, "click", function(event) {
                addMarker(event.latLng);
            });
        }
        //添加叠加层
        function addMarker(location) {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
            //将新创建的叠加层加入叠加层对象数组
            markersArray.push(marker);
        }

        //设置所有叠加层不显示
        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }
        //设置所有叠加层显示
        function showOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(map);
                }
            }
        }

        //删除所有叠加层
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }
        //将地图初始化函数绑定到window的load事件
        google.maps.event.addDomListener(window, "load", initialize);

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="btn1" οnclick="clearOverlays();" value="设置所有叠加层不显示" type="button" />
        <input id="btn2" οnclick="showOverlays();" value="设置所有叠加层显示" type="button" />
        <input id="btn3" οnclick="deleteOverlays();" value="删除所有叠加层" type="button" />
    </div>
    <div id="maps">
    </div>
    </form>
</body>
</html>