1

この問題は、Google のサンプル ページhttps://developers.google.com/maps/documentation/javascript/examples/drawing-toolsで確認できます。世界全体が見えるところまでズームアウトし、長方形を描こうとすると、180 度以上の経度がカバーされると反対方向をカバーするようにスナップします。

ドキュメントhttps://developers.google.com/maps/documentation/javascript/drawingでこの動作を変更する方法が見つかりませんでした。これを修正する方法はありますか？そうでない場合、これを達成するために使用できる別の JavaScript ライブラリはありますか?

4

1 に答える 1

1

描画ライブラリがこれをサポートしていないため、独自の描画方法/選択ツールを実装することになりました。地図をクリックすると「選択」モードになり、マウス移動で長方形が描画されます。もう一度クリックすると、選択が完了し、レンダリングされた長方形がマップ上に残ります。「魔法」は calculateBounds 関数で発生します。

self.map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(0,0),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    self.rectangle = new google.maps.Rectangle ({
        map: null,
        clickable:  false,
        selectable: false,
        dragable: true,
        fillColor:  "#000000",
        fillOpacity:    0.2,
        strokeColor:    "#000000",
        strokeOpacity:  1.0,
        strokeWeight:   1
    });

    google.maps.event.addListener(self.map, 'click', function(e) {
        self.select = !self.select;

        if (self.select) {
            self.startPoint = e.latLng;
        } else {
            self.drawRectangle(e.latLng);

            self.north(self.rectangle.getBounds().getNorthEast().lat().toFixed(15));
            self.south(self.rectangle.getBounds().getSouthWest().lat().toFixed(15));
            self.east(self.rectangle.getBounds().getNorthEast().lng().toFixed(15));
            self.west(self.rectangle.getBounds().getSouthWest().lng().toFixed(15));
        }
    });

    google.maps.event.addListener(self.map, 'mousemove', function(e) {
        if (self.select) {
            self.drawRectangle(e.latLng);
        }
    });

    self.calculateBounds = function(newEndPoint) {
        var north = self.startPoint.lat() >= newEndPoint.lat() ? self.startPoint.lat() : newEndPoint.lat();
        var south = self.startPoint.lat() <= newEndPoint.lat() ? self.startPoint.lat() : newEndPoint.lat();
        var sw = new google.maps.LatLng(south, self.startPoint.lng());
        var ne = new google.maps.LatLng(north, newEndPoint.lng());

        return new google.maps.LatLngBounds(sw, ne);
    };

    self.drawRectangle = function(newEndPoint) {
        self.rectangle.setBounds(self.calculateBounds(newEndPoint));
        self.rectangle.setMap(self.map);
    };
于 2013-09-16T14:02:50.437 に答える