Google地图v3显示可缩放图像

我正在尝试让Google地图显示可用于缩放的图像。我在大部分工作中都使用了这个tutorial，但我遇到了两个问题。Google地图v3显示可缩放图像

我试图自然显示的图像是256x193。图像被拉伸至适合256x256。我怎样才能让谷歌地图知道只显示在256x193图像。

我想绑定框，以便图像总是在视图中，而不是背景。我很接近，但我正在寻求更好的解决方案。我正在使用的那个只限于中心。如果我平移，我仍然可以部分看到地图背景。

var allowedBounds = null; 
var lastValidCenter = null; 

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    allowedBounds = map.getBounds(); 
    lastValidCenter = map.getCenter(); 
});  

google.maps.event.addListener(map, 'center_changed', function() { 
    if (allowedBounds.contains(map.getCenter())) { 
    lastValidCenter = map.getCenter(); 
     return; 
    } 

    map.panTo(lastValidCenter); 
});

PS。我使用谷歌是因为我对所有的事情都有好感。如果有更好的标准解决方案可以让我缩放多个图像层次，请让我知道。

更新：我得到了随机图像大小工作！该代码波纹管修改一下上面的教程开始

Demo.ImgMapType.prototype.imageSize= new google.maps.Size(256, 193); 
    Demo.ImgMapType.prototype.getTile = function (coord, zoom, ownerDocument) { 
     var tilesCount = Math.pow(2, zoom); 
     var maxWidth = this.imageSize.width * tilesCount; 
     var maxHeight = this.imageSize.height * tilesCount; 
     var width = this.tileSize.width; 
     var height = this.tileSize.height; 
     var maxX = width * (1 + coord.x); 
     var maxY = height * (1 + coord.y); 
     if (maxX > maxWidth){ 
      width = width - (maxX - maxWidth); 
     } 
     if (maxY > maxHeight){ 
      height = height - (maxY - maxHeight); 
     } 

     var div = ownerDocument.createElement('div'); 
     div.style.width = this.tileSize.width + 'px'; 
     div.style.height = this.tileSize.height + 'px'; 
     div.style.backgroundColor = this._backgroundColor; 

     if (width <= 0 || coord.x < 0 || height <= 0 || coord.y < 0) { 
      return div;  
     } 

     var img = ownerDocument.createElement('IMG'); 
     img.width = width; 
     img.height = height; 
     img.src = Demo.Utils.GetImageUrl(this._theme + '_' + zoom + '_' + coord.x + '_' + coord.y + '.jpg'); 
     // Add the image to the div so that we hide the map background 
     div.appendChild(img); 
     return div; 
    };

来源

2012-07-30 Peter

我建议使您的图像256x256填充空白区域的顶部和底部（或只是底部）。这将阻止它被拉伸，并且你可以使用界限来限制显示的内容。 – 2012-07-30 15:23:17

用户将上传图片，所以我不想在他们身上施加限制 – Peter 2012-07-30 15:44:36

不幸的是，这是一个API约束。这些瓷砖是256px的正方形。 – 2012-07-30 15:49:44

我得到了随机图像大小的工作！下面的代码修改了我提到的教程开始

Demo.ImgMapType.prototype.imageSize= new google.maps.Size(256, 193); 
    Demo.ImgMapType.prototype.getTile = function (coord, zoom, ownerDocument) { 
     var tilesCount = Math.pow(2, zoom); 
     var maxWidth = this.imageSize.width * tilesCount; 
     var maxHeight = this.imageSize.height * tilesCount; 
     var width = this.tileSize.width; 
     var height = this.tileSize.height; 
     var maxX = width * (1 + coord.x); 
     var maxY = height * (1 + coord.y); 
     if (maxX > maxWidth){ 
      width = width - (maxX - maxWidth); 
     } 
     if (maxY > maxHeight){ 
      height = height - (maxY - maxHeight); 
     } 

     var div = ownerDocument.createElement('div'); 
     div.style.width = this.tileSize.width + 'px'; 
     div.style.height = this.tileSize.height + 'px'; 
     div.style.backgroundColor = this._backgroundColor; 

     if (width <= 0 || coord.x < 0 || height <= 0 || coord.y < 0) { 
      return div;  
     } 

     var img = ownerDocument.createElement('IMG'); 
     img.width = width; 
     img.height = height; 
     img.src = Demo.Utils.GetImageUrl(this._theme + '_' + zoom + '_' + coord.x + '_' + coord.y + '.jpg'); 
     // Add the image to the div so that we hide the map background 
     div.appendChild(img); 
     return div; 
    };

来源

2012-08-08 21:20:31 Peter

根据不同的平台和语言上你可以有脚本处理上传的分析图像，并相应地垫它。这并不难。

不知道如何处理，否则。

至于边界：How do I limit panning in Google maps API V3?

来源

2012-07-30 15:48:22 Remog

我用那个代码我在上面发布的代码的基础。它限制了它，但我仍然能够将图像滚动一半的图像（并参见bg）。我想要限制我的中心，这样即使在放大后我也不会看到地图的背景。 – Peter 2012-07-30 15:52:57

Google地图v3显示可缩放图像

回答

相关问题