0

ズームに使用できる画像をGoogleマップに表示させようとしています。私はほとんどの作業でこのチュートリアルを使用しましたが、2つの問題が発生しています。

  1. 自然に表示しようとしている画像は256x193です。画像は256x256に合うように引き伸ばされます。256x193でのみ画像を表示するようにGoogleマップに通知するにはどうすればよいですか。

  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 Maps 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 に答える