Html 添加多个地面覆盖层'；s在平铺位置创建重复出现的异常
各位交易所会员好, 我真的很难添加多个GroundOverlays和/或CustomOverlays。谷歌地图总是显示出一个轻微的和反复出现的异常定位瓷砖。下图显示了我的意思： （我没有足够的声誉来在线显示图像） 我使用了Google关于如何使用CustomOverlay的示例代码，如下所示，以及一个prebuild grid.json文件，其中包含了所有平铺图像键及其SW和NE边界： 地图文件： 它由许多键（如“110-862”）组成，经过计算后，这些键表示Rijksdriehoeks坐标（荷兰地理空间表示）。这些坐标已转换为WGS84，精度为0.2mm。但我还是得到了这些奇怪的扭曲 有没有人有一起使用这么多地图分幅的经验 致以亲切的问候Html 添加多个地面覆盖层'；s在平铺位置创建重复出现的异常,html,google-maps-api-3,Html,Google Maps Api 3,各位交易所会员好, 我真的很难添加多个GroundOverlays和/或CustomOverlays。谷歌地图总是显示出一个轻微的和反复出现的异常定位瓷砖。下图显示了我的意思： （我没有足够的声誉来在线显示图像） 我使用了Google关于如何使用CustomOverlay的示例代码，如下所示，以及一个prebuild grid.json文件，其中包含了所有平铺图像键及其SW和NE边界： 地图文件： 它由许多键（如“110-862”）组成，经过计算后，这些键表示Rijksdriehoeks坐标（
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
*{ margin:0;padding:0;}
html{ height: 100%;}
body{ height: 100%; margin:0; padding:0;}
#map-canvas{ height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOwFuc5S-hRJnfyYI3xL-0TJNcPjbRd2s&sensor=false">
</script>
<script type="text/javascript">
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class.
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.960515285616523328826588112860918045043945312500,
4.026193748674999461911738762864843010902404785156 ),
zoom: 13
};
var map = new google.maps.Map( document.getElementById( 'map-canvas'), mapOptions );
var grid = $.getJSON( 'grid.json', function( json ){
$.each( json, function( index, value )
{
var image = index + '.png';
var swBound = new google.maps.LatLng( value['sw'][0], value['sw'][1] );
var neBound = new google.maps.LatLng( value['ne'][0], value['ne'][1] );
var bounds = new google.maps.LatLngBounds( swBound, neBound )
overlay = new USGSOverlay( bounds, image, map );
overlay.setOpacity( 50 );
});
});
}
/** @constructor */
function USGSOverlay(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.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.className = 'reset';
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.opacity = '0.6';
// 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);
};
USGSOverlay.prototype.setOpacity = function( op )
{
$('div.reset').css( 'opacity', op/100 );
}
USGSOverlay.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';
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener( window, 'load', initialize );
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
{
"110-861": {
"ne": [
51.952818013763725,
3.959379207489501
],
"sw": [
51.94812597892079,
3.952079437462081
]
},
"110-862": {
"ne": [
51.95741935496997,
3.9592327762378288
],
"sw": [
51.95272731127462,
3.9519322780340236
]
},
...
}