我想要的是,地图上有2个自定义叠加层,能够使用两个按钮分别显示/隐藏两个叠加层。目前,我有一个可以显示/隐藏按钮的叠加层,但是我无法在地图上显示第二个叠加层。 This suggestion对我来说不起作用,而我的代码看起来像这样:
<script>
var overlay;
SchipholOverlay.prototype = new google.maps.OverlayView();
function initialize()
{
var mapProp = { //set map properties
center:new google.maps.LatLng(52.309213,4.762316),
zoom:16,
mapTypeId:google.maps.MapTypeId.HYBRID
};
//create map variable with properties
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var swBound = new google.maps.LatLng(52.299000,4.759711);
var neBound = new google.maps.LatLng(52.313400,4.786885);
var swBound2 = new google.maps.LatLng(52.299000,4.759711);
var neBound2 = new google.maps.LatLng(52.283400,4.782885);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);
// Insert overlay image here
var srcImage = 'departures_gates.gif';
var srcImage2 = 'arrivalsdepartures2.gif';
overlay = new SchipholOverlay(bounds, srcImage, map);
overlay = new SchipholOverlay(bounds2, scrImage2, map);
}
function SchipholOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
SchipholOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() 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.borderStyle = '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 = '65%';
img.style.height = '65%';
img.style.position = 'absolute';
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 overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
SchipholOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels 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';
}
SchipholOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
//this.div_ = null;
}
SchipholOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
SchipholOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
SchipholOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == 'hidden') {
this.show();
} else {
this.hide();
}
}
}
//initialize the map
google.maps.event.addDomListener(window, 'load', initialize);
html:
<div id ="panel">
<input type="button" value="Toggle Visibility" onclick="overlay.toggle();"></input>
</div>
<div class="map" id="googleMap" style="width:1600px;height:800px;"></div>
非常感谢任何帮助!
答案 0 :(得分:1)
对每个叠加层保持唯一引用(如链接问题中所示)。
而不是这(覆盖对第一个的引用):
overlay = new SchipholOverlay(bounds, srcImage, map);
overlay = new SchipholOverlay(bounds2, srcImage2, map);
为他们提供唯一的名称或将其推送到数组:
// in the global scope
var overlays = [];
overlays.push(new SchipholOverlay(bounds, srcImage, map));
overlays.push(new SchipholOverlay(bounds2, srcImage2, map));
注意:scrImage2似乎是一个错字。
<input type="button" value="Toggle Visibility 1" onclick="overlays[0].toggle();"></input>
<input type="button" value="Toggle Visibility 2" onclick="overlays[1].toggle();">
example(没有图片)