2
我正在尋找一種將多個圖像疊加到我的谷歌地圖上的優雅方式，必須有一種簡單的方法來做到這一點，而無需編寫代碼頁，但谷歌似乎並沒有爲如何附加多個自定義疊加提供了一個很好的線索。有沒有辦法在initialize（）函數中創建多個疊加變量？如何將多個圖像疊加到谷歌地圖上
<!DOCTYPE html>
<html>
<head>
<title>Dopler Scott</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var windowWidth = document.documentElement.clientWidth ;
if(windowWidth<1000){zoomValue=6;}else{zoomValue=8;}
var overlay;
portlandOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.710,-122.959),
zoom:zoomValue,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var swBound = new google.maps.LatLng(43.094, -125.895);
var neBound = new google.maps.LatLng(48.275, -120.250);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'http://s3.amazonaws.com/theoatmeal-img/quizzes/sriracha_addict/start_button.png';
overlay = new portlandOverlay(bounds, srcImage, map);
}
function portlandOverlay(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 onAdd() method so we'll leave it null for now.
this.div_ = null;
this.setMap(map); // Explicitly call setMap on this overlay
}
portlandOverlay.prototype.onAdd = function() { // Create the DIV and set some basic attributes.
// 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.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.className = 'portland';
var img = document.createElement('img'); // Create an IMG element and attach it to the DIV.
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
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);
}
portlandOverlay.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';
}
startDoingStuff = function(){}
$(document).ready(startDoingStuff());
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>