谷歌地图v3只使用自己的瓷砖(从v2转换)

问题描述:

我使用GMapImageCutter为拼贴(自定义地图)生成拼贴和js。一切正常,但那是v2。我添加了标记,infowindows等,投影工作得很好。现在我无法将这个简单的应用程序迁移到v3。有人可以指引我使用NO MAPS的网站,只是它自己的瓦片集合 - 在v3中?这是GMapImageCutter JS谷歌地图v3只使用自己的瓷砖(从v2转换)

<!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" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
    <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>Picture Viewer</title> 

    <style type="text/css"> 
    v\:* { 
     behavior:url(#default#VML); 
    } 
    </style> 


    <script src="http://maps.google.com/maps?file=api&v=2.x&key=PUTAPIKEYHERE" 
      type="text/javascript"></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 GMap2 itself 

///////////////////// 
//Custom projection 
//pass this zoom level count, wrap Boolean 
///////////////////// 
    function CustomProjection(a,b){ 

    this.imageDimension=65536; 

    this.pixelsPerLonDegree=[]; 
    this.pixelOrigin=[]; 
    this.tileBounds=[]; 
    this.tileSize=256; 
    //use original b 
    this.isWrapped=b; 
    //define a new b 
    //why would anyone do this? 
    var b=this.tileSize; 

    var c=1; 
    for(var d=0;d<a;d++){ 
      var e=b/2; 
      this.pixelsPerLonDegree.push(b/360); 
      this.pixelOrigin.push(new GPoint(e,e)); 
      this.tileBounds.push(c); 
      b*=2; 
      c*=2 
     } 
    } 

    CustomProjection.prototype=new GProjection(); 

    CustomProjection.prototype.fromLatLngToPixel=function(latlng,zoom){ 
     var c=Math.round(this.pixelOrigin[zoom].x+latlng.lng()*this.pixelsPerLonDegree[zoom]); 
     var d=Math.round(this.pixelOrigin[zoom].y+(-2*latlng.lat())*this.pixelsPerLonDegree[zoom]); 
     return new GPoint(c,d) 
    }; 

    CustomProjection.prototype.fromPixelToLatLng=function(pixel,zoom,unbounded){ 
     var d=(pixel.x-this.pixelOrigin[zoom].x)/this.pixelsPerLonDegree[zoom]; 
     var e=-0.5*(pixel.y-this.pixelOrigin[zoom].y)/this.pixelsPerLonDegree[zoom]; 
     return new GLatLng(e,d,unbounded) 
    }; 

    CustomProjection.prototype.tileCheckRange=function(tile,zoom,tilesize){ 
     var tileBounds=this.tileBounds[zoom]; 
    if (tile.y<0 || tile.y >= tileBounds) {return false;} 
     if (this.isWrapped) { 
     if (tile.x<0 || tile.x>=tileBounds) { 
      tile.x = tile.x%tileBounds; 
      if (tile.x < 0) {tile.x+=tileBounds} 
     } 
    } 
    else { 
      if (tile.x<0 || tile.x>=tileBounds) {return false;} 
    } 
    return true; 
    } 

    CustomProjection.prototype.getWrapWidth=function(zoom) { 
     return this.tileBounds[zoom]*this.tileSize; 
    } 
//////////////////////////////////////////////////////////////////////////// 

    function customGetTileURL(a,b) { 
     //converts tile x,y into keyhole string 

     var c=Math.pow(2,b); 

     var d=a.x; 
     var e=a.y; 
     var f="t"; 
     for(var g=0;g<b;g++){ 
      c=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} 
      } 
     } 
     return "sqShelvesFloors03-tiles/"+f+".jpg" 
    } 


    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() { 
     if (GBrowserIsCompatible()) { 
     resizeMapDiv(); 
     //pragmatic extents 
     var copyright = new GCopyright(1, 
           new GLatLngBounds(new GLatLng(-90, -180), 
               new GLatLng(90, 180)), 
           0, 
           "<a href=\"http://www.casa.ucl.ac.uk\">CASA</a>"); 
     var copyrightCollection = new GCopyrightCollection("GMapImgCutter"); 
     copyrightCollection.addCopyright(copyright); 

     //create a custom picture layer 
     var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0, 17)]; 
     pic_tileLayers[0].getTileUrl = customGetTileURL; 
     pic_tileLayers[0].isPng = function() { return false; }; 
     pic_tileLayers[0].getOpacity = function() { return 1.0; }; 
     var proj=new CustomProjection(5,imageWraps); 
     var pic_customMap = new GMapType(pic_tileLayers, proj, "Pic", 
      {maxResolution:4, minResolution:0, errorMessage:"Data not available"}); 


     //Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP 
     map = new GMap2(document.getElementById("map"),{mapTypes:[pic_customMap]}); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GMapTypeControl()); 
     map.addControl(new GOverviewMapControl()); 
     map.enableDoubleClickZoom(); 
     map.enableContinuousZoom(); 
     map.enableScrollWheelZoom(); 
     map.setCenter(new GLatLng(centreLat, centreLon), initialZoom, pic_customMap); 

///////////////////////////////////////////////////////////////////////////////////// 
//Add any markers here e.g. 
//  map.addOverlay(new GMarker(new GLatLng(x,y))); 
///////////////////////////////////////////////////////////////////////////////////// 

    map.addOverlay(new GMarker(new GLatLng(85,170))); 
    map.addOverlay(new GMarker(new GLatLng(85,-170))); 
    map.addOverlay(new GMarker(new GLatLng(-85,-170))); 
    map.addOverlay(new GMarker(new GLatLng(-85,170))); 
     } 
    } 

    //]]> 
    </script> 
    </head> 
    <body onresize="resizeMapDiv()" onload="load()" onunload="GUnload()"> 
    <div id="map"></div> 
    </body> 
</html> 

你需要的一切(包括示例)在这里:

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#Projections

它看起来像你既需要自定义投影和ImageMapType。

+0

感谢plexer。我会伪造aheaad。 – user1320487

我制作了一段视频,介绍了如何使用MapTiler(来自MapTiler.org)创建平铺v3地图。 http://youtu.be/CeSFUSZLeao它并不完全符合你自己的瓷砖使用只有的要求,但它可能会让你接近你想要的。

+0

特洛特,感谢视频,但据我所知,结果是v2而不是v3。他们的“测试版”位于2008年的网页上。 – user1320487

+0

该视频介绍了如何将输出结果转换为v3。 – Trott

+0

转换说明从[10:24]开始(http://www.youtube.com/watch?v=CeSFUSZLeao)。如果脚本失败,请尝试在脚本上运行dos2unix(dos2unix moveTiles.sh) – Cameron