Mam taki problem, zrobiłem kod z google map i chce aby po za mape nie dalo sie wyjechac. Obecnie mam tak ze przesuwając moge jechac i jechac bez konca na bialym tle.
ss:
http://iv.pl/images/16197759761087648399.pngKod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html/xml; charset=utf-8"/>
<meta name="author" content="Richard Milton, Centre for Advanced Spatial Analysis (CASA), University College London (UCL)">
<meta name="description" content="Page automatically created by GMapImageCutter created by CASA">
<meta name="keywords" content="Google, Maps, Image, Images, Tile, Cutter, GMapImageCutter, GMapCreator">
<title>xxxxxx</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var centreLat=0.0;
var centreLon=0.0;
var initialZoom=2;
var imageWraps=false; //SET THIS TO false TO PREVENT THE IMAGE WRAPPING AROUND
var map; //the GMap3 itself
var gmicMapType;
function GMICMapType() {
this.opacity = 1.0;
}
GMICMapType.prototype.tileSize = new google.maps.Size(256, 256);
GMICMapType.prototype.maxZoom = 19;
GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var c = Math.pow(2, zoom);
var c = Math.pow(2, zoom);
var tilex=coord.x,tiley=coord.y;
if (imageWraps) {
if (tilex<0) tilex=c+tilex%c;
if (tilex>=c) tilex=tilex%c;
if (tiley<0) tiley=c+tiley%c;
if (tiley>=c) tiley=tiley%c;
}
else {
if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c))
{
var blank = ownerDocument.createElement('DIV');
blank.style.width = this.tileSize.width + 'px';
blank.style.height = this.tileSize.height + 'px';
return blank;
}
}
var img = ownerDocument.createElement('IMG');
var d = tilex;
var e = tiley;
var f = "t";
for (var g = 0; g < zoom; g++) {
c /= 2;
if (e < c) {
if (d < c) { f += "q" }
else { f += "r"; d -= c }
}
else {
if (d < c) { f += "t"; e -= c }
else { f += "s"; d -= c; e -= c }
}
}
img.id = "t_" + f;
img.style.width = this.tileSize.width + 'px';
img.style.height = this.tileSize.height + 'px';
img.src = "Pride Role Play-tiles/"+f+".jpg";
this.Cache.push(img);
return img;
}
GMICMapType.prototype.realeaseTile = function(tile) {
var idx = this.Cache.indexOf(tile);
if(idx!=-1) this.Cache.splice(idx, 1);
tile=null;
}
GMICMapType.prototype.name = "xxxxxx";
GMICMapType.prototype.alt = "xxxxxx";
GMICMapType.prototype.setOpacity = function(newOpacity) {
this.opacity = newOpacity;
for (var i = 0; i < this.Cache.length; i++) {
this.Cache[i].style.opacity = newOpacity; //mozilla
this.Cache[i].style.filter = "alpha(opacity=" + newOpacity * 100 + ")"; //ie
}
}
function getWindowHeight() {
if (window.self&&self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement&&document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
return 0;
}
function resizeMapDiv() {
//Resize the height of the div containing the map.
//Do not call any map methods here as the resize is called before the map is created.
var d=document.getElementById("map");
var offsetTop=0;
for (var elem=d; elem!=null; elem=elem.offsetParent) {
offsetTop+=elem.offsetTop;
}
var height=getWindowHeight()-offsetTop-16;
if (height>=0) {
d.style.height=height+"px";
}
}
function load() {
resizeMapDiv();
var latlng = new google.maps.LatLng(centreLat, centreLon);
var myOptions = {
zoom: initialZoom,
minZoom: 2,
maxZoom: 5,
center: latlng,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: true,
mapTypeControlOptions: { mapTypeIds: ["ImageCutter"] },
mapTypeId: "ImageCutter"
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
gmicMapType = new GMICMapType();
map.mapTypes.set("ImageCutter",gmicMapType);
/////////////////////////////////////////////////////////////////////////////////////
//Add any markers here e.g.
// var marker = new google.maps.Marker({
// map:map,
// position: new google.maps.LatLng(x,y),
// title: "My Marker"
// });
/////////////////////////////////////////////////////////////////////////////////////
}
//]]>
</script>
</head>
<body onresize="resizeMapDiv()" onload="load()">
<div id="map"></div>
</body>
</html>
Ten post edytował Hosiek 22.05.2012, 18:59:23