Google maps 谷歌地图显示/隐藏多个覆盖默认情况下隐藏
我有一个我正在制作的自定义地图，有两个叠加显示完美，可以隐藏，然后按一个按钮显示。问题是，我想在地图加载时隐藏覆盖，并且只在按下相应的按钮时显示它们。我使用了这个线程加上这里的示例来达到这个目的，但是我无法理解如何使它起相反的作用Google maps 谷歌地图显示/隐藏多个覆盖默认情况下隐藏,google-maps,Google Maps,我有一个我正在制作的自定义地图，有两个叠加显示完美，可以隐藏，然后按一个按钮显示。问题是，我想在地图加载时隐藏覆盖，并且只在按下相应的按钮时显示它们。我使用了这个线程加上这里的示例来达到这个目的，但是我无法理解如何使它起相反的作用 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="maps.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>AAPG Breach</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = '/maps/bdx_breach/';
baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = '#222222';
div.style.backgroundImage = 'url(' + baseURL + ')';
return div;
};
CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
var overlays = [];
var boundsArray = [];
AAPGOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var mapOptions = {
minZoom: 2,
maxZoom: 7,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(80,-160),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
var swBound = new google.maps.LatLng(80.03238, -169.90);
var neBound = new google.maps.LatLng(80.70, -163.50);
var swBound2 = new google.maps.LatLng(83.35, -163.35);
var neBound2 = new google.maps.LatLng(84.41, -153.35);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);
boundsArray.push(bounds);
boundsArray.push(bounds2);
var srcImage = '/maps/bdx_breach/breach_alpha_spawn.png';
var srcImage2 = '/maps/bdx_breach/breach_bravo_spawn.png';
overlays.push(new AAPGOverlay(bounds, srcImage, map));
overlays.push(new AAPGOverlay(bounds2, srcImage2, map));
}
function AAPGOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
AAPGOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the 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%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
AAPGOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
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';
};
AAPGOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
//this.div_ = null;
};
AAPGOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
};
AAPGOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
};
AAPGOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == 'hidden') {
this.show();
} else {
this.hide();
}
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="toggle">
<input type="button" class="toggle" value="Alpha Spawn" onclick="overlays[0].toggle();"></input></br>
<input type="button" class="toggle" value="Bravo Spawn" onclick="overlays[1].toggle();"></input>
</div>
<div id="map_canvas" style="background: #222222;"></div>
</body>
</html>
AAPG违约
函数CustomMapType（）{
}
CustomMapType.prototype.tileSize=新的google.maps.Size（256256）；
CustomMapType.prototype.maxZoom=7；
CustomMapType.prototype.getTile=函数（坐标、缩放、所有者文档）{
var div=ownerDocument.createElement（'div'）；
var baseURL='/maps/bdx_-break/'；
baseURL+=zoom+'''.'+coord.x+'.''+coord.y+'.png'；
div.style.width=this.tileSize.width+'px'；
div.style.height=this.tileSize.height+'px'；
div.style.backgroundColor='#2222222'；
div.style.backgroundImage='url（'+baseURL+'）；
返回div；
};
CustomMapType.prototype.name=“自定义”；
CustomMapType.prototype.alt=“平铺坐标贴图类型”；
var映射；
var CustomMapType=新的CustomMapType（）；
var覆盖=[]；
var boundsArray=[]；
AAPGOverlay.prototype=新的google.maps.OverlayView（）；
函数初始化（）{
变量映射选项={
minZoom:2，
最大缩放：7，
是的，
mapTypeControl:false，
街景控制：错误，
中心：新google.maps.LatLng（80，-160），
缩放：3，
mapTypeControlOptions：{
MapTypeId:['custom'，google.maps.MapTypeId.ROADMAP]，
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
}
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
map.mapTypes.set（'custom'，CustomMapType）；
setMapTypeId（'custom'）；
var swBound=new google.maps.LatLng（80.03238，-169.90）；
var neBound=new google.maps.LatLng（80.70，-163.50）；
var swBound2=新的google.maps.LatLng（83.35，-163.35）；
var neBound2=新的google.maps.LatLng（84.41，-153.35）；
var bounds=new google.maps.LatLngBounds（swBound，neBound）；
var bounds2=新的google.maps.LatLngBounds（swBound2，neBound2）；
boundsArray.push（边界）；
boundsArray.push（bounds2）；
var srcImage='/maps/bdx_break/break_alpha_spawn.png'；
var srcImage2='/maps/bdx_break/break_bravo_spawn.png'；
推送（新的AAPGOverlay（边界、srcImage、map））；
推送（新的AAPGOverlay（bounds2，srcImage2，map））；
}
函数AAPGOverlay（边界、图像、地图）{
//初始化所有属性。
this.bounds=bounds；
this.image=image；
this.map=map；
//定义一个属性来保存图像的div。我们将
//在收到onAdd（）时实际创建这个div
//方法，因此我们暂时将其保留为空。
this.div=null；
//在此覆盖上显式调用setMap。
这个.setMap（map）；
}
/**
*当地图的窗格准备就绪且覆盖已完成时，将调用onAdd
*添加到地图中。
*/
AAPGOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='none'；
div.style.borderWidth='0px'；
div.style.position='绝对'；
//创建img元素并将其附加到div。
var img=document.createElement（'img'）；
img.src=this.image；
img.style.width='100%'；
img.style.height='100%'；
img.style.position='绝对'；
儿童分部（img）；
this.div=div；
//将元素添加到“覆盖层”窗格。
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
//[结束区域\附件]
//[开始区域\u绘图]
AAPGOverlay.prototype.draw=函数（）{
//我们使用西南部和东北部
//将覆盖层固定到正确位置和大小的坐标。
//为此，我们需要从覆盖中检索投影。
var overlyprojection=this.getProjection（）；
//检索此覆盖的西南和东北坐标
//并将其转换为像素坐标。
//我们将使用这些坐标来调整div的大小。
var sw=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getSouthWest（））；
var ne=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getNorthEast（））；
//调整图像的div大小以适合指定的尺寸。
var div=this.div_2;；
div.style.left=sw.x+‘px’；
div.style.top=ne.y+'px'；
div.style.width=（ne.x-sw.x）+“px”；
div.style.height=（西南y-东北y）+“px”；
};
AAPGOverlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
//this.div=null；
};
AAPGOverlay.prototype.hide=函数（）{
如果（此.div){
this.div_.style.visibility=“hidden”；
}
};
AAPGOverlay.prototype.show=函数（）{
如果（此.div){
this.div_.style.visibility=“visible”；
}
};
AAPGOverlay.prototype.toggle=函数（）{
如果（此.div){
if（this.div\uuz.style.visibility=='hidden'）{
this.show（）；
}否则{
this.hide（）；
}
}
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
// Create the 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%';
img.style.position = 'absolute';
div.appendChild(img);
div.style.visibility = "hidden"
您稍后会在电话中这样做，但在开始时不会这样做。请检查此项，谢谢回复。我用这个链接让我的覆盖图开始工作。但是现在我想让覆盖层在默认情况下隐藏，并且只在按下按钮时显示。这就是我面临的问题。