如何将多个图像叠加到谷歌地图上 [英] How to overlay multiple images onto google maps
本文介绍了如何将多个图像叠加到谷歌地图上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找一种将多个图像叠加到我的谷歌地图上的优雅方式，必须有一种简单的方法来完成此操作，而无需编写代码页，但Google似乎无法提供有关如何附加多个自定义覆盖。有没有办法在initialize（）函数中创建多个叠加变量？
<！DOCTYPE html>
< html>
< head>
< title> Dopler Scott< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< link rel =stylesheettype =text / csshref =styles.css/>
< script type =text / javascriptsrc =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（）;
函数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）;
}
函数portlandOverlay（bounds，image，map）{//现在初始化所有属性。
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; //我们定义一个属性来保存图像的div。我们实际上会在收到onAdd（）方法后创建这个div，所以我们暂时将它留空。
this.div_ = null;
this.setMap（map）; //在这个覆盖层
}
上显式地调用setMap portlandOverlay.prototype.onAdd = function（）{//创建DIV并设置一些基本属性。
//注意：overlay的onAdd（）表示地图的窗格现在可用于通过DOM将覆盖图附加到地图上。
var div = document.createElement（'div'）;
div.style.borderStyle ='none';
div.style.borderWidth ='0px';
div.style.position ='绝对';
div.className ='portland';
var img = document.createElement（'img'）; //创建一个IMG元素并将其附加到DIV。
img.src = this.image_;
img.style.width ='100％';
img.style.height ='100％';
img.style.position ='绝对';
div.appendChild（img）;
//将叠加层的div_属性设置为这个DIV？
this.div_ = div;
//我们通过地图的一个窗格向地图添加覆盖图。我们将这个叠加层添加到overlayLayer窗格。
var panes = this.getPanes（）;
panes.overlayLayer.appendChild（div）;
}
portlandOverlay.prototype.draw = function（）{//覆盖图的大小和位置。我们使用覆盖层的西南和东北位置将其固定到正确的位置和大小。
//我们需要从这个覆盖图中检索投影来做到这一点。
var overlayProjection = this.getProjection（）;
//以这个覆盖图的latitude来检索这个覆盖图的西南和东北坐标，并将它们转换为像素坐标。
//我们将使用这些坐标来调整DIV的大小。
var sw = overlayProjection.fromLatLngToDivPixel（this.bounds_.getSouthWest（））;
var ne = overlayProjection.fromLatLngToDivPixel（this.bounds_.getNorthEast（））;
//调整图像的DIV大小以适合指定的尺寸。
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_canvasstyle =width：100％; height：100％>< / div>
< / body>
解决方案
您的问题不是是否有创建多个覆盖变量的方法，您的问题是您创建覆盖变量。 （下一个覆盖变量将覆盖当前）
只需创建对象而不用指定名称（您不会在脚本内的其他位置使用该名称，你完全不需要它）：
pre $ new $ port $ o $（new）portlandOverlay（bounds，srcImage，map）;
new portlandOverlay（bounds2，srcImage2，map）;
new portlandOverlay（bounds3，srcImage3，map）;
// ...等等
I'm looking for an elegant way to overlay multiple images onto my google maps, there must be a simple way to do this without writing pages of code, but google doesn't seem to provide a good clue for how to attach multiple custom overlays. Is there a way to create multiple overlay variables within the initialize() function?
<!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>
解决方案
Your problem is not "Is there a way to create multiple overlay variables" , your problem is that you create the overlay-variable. (the next overlay-variable will overwrite the current)
Simply create the objects without giving it a name(you don't use the name somewhere else inside your script, so you don't need it at all):
new portlandOverlay(bounds, srcImage, map);
new portlandOverlay(bounds2, srcImage2, map);
new portlandOverlay(bounds3, srcImage3, map);
//....and so on
这篇关于如何将多个图像叠加到谷歌地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
