谷歌地图v3显示可缩放的图像

Question

我正在尝试让谷歌地图显示一个可以用来缩放的图像。我在大部分工作中都使用了本教程，但我遇到了两个问题。

1. 我尝试自然显示的图像是256x193。图像被拉伸以适合256x256。我如何让谷歌地图知道只显示256x193的图像

2. 我正在尝试绑定框，以便图像始终在视图中，而不是背景。我很接近，但我一直在寻找更好的解决方案。我正在使用的那个只限制中心。如果平移，我仍然可以部分看到地图背景。

   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;
    };

Answer 1

根据平台和语言的不同，您可以让处理上传的脚本分析图像并相应地填充。这并不难。

不知道如何处理。

至于边界：我如何限制谷歌地图API V3中的平移？

Answer 2

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

    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;
    };