0

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

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

2 回答 2

0

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

不知道如何处理它。

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

于 2012-07-30T15:48:22.697 回答
0

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

    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-08T21:20:31.827 回答