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

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

2010-10-25 15:32 417 查看

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


<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 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" onclick="clearOverlays();" value="设置所有叠加层不显示" type="button" />
<input id="btn2" onclick="showOverlays();" value="设置所有叠加层显示" type="button" />
<input id="btn3" onclick="deleteOverlays();" value="删除所有叠加层" type="button" />
</div>
<div id="maps">
</div>
</form>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航