Question

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

我想要自然显示的图像是256x193。图像被拉伸到256x256。如何让google地图知道只显示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。我正在使用Google，因为我对所有事情都很喜欢。如果有更好的标准解决方案让我可以放大多个图像级别，请告诉我。

更新：我的随机图像尺寸正常工作！下面的代码修改了上面的教程开始的内容

    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

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

不知道如何处理它。

至于边界：How do I limit panning in Google maps 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;
    };

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

2 个答案: