Googleマップのオートコンプリートを使用して、結果をにバイアスしようとしていますLatLngBounds
。島(ハワイ諸島など)の周りに長方形を描画して、LatLngBoundsをそのように取得できるようにしたいと思います。私を助けるために使用できるツールはありますか?
質問する
12760 次
2 に答える
12
昔、私はあなたの使用に合わせた「ズームウィンドウ」を書きました。それはただの地図と長方形のリスナーです。
http://jsfiddle.net/yV6xv/16/embedded/result/
コードを表示するには:
これを使用するには、最初にズームインして手動で島にパンします。選択する領域全体が画面に表示されている必要があります。
次に、1回クリックして、長方形のコーナーを定義します。マウスを対角線上の反対側の角に向かって動かします。(長方形の選択が表示されます)。もう一度クリックして、長方形の領域を定義します。マップの上のテキストエリアには、SWポイントとNEポイントを持つ選択されたLatLngBoundsが表示されます。
日付変更線を封じ込めようとすると、期待どおりに動作しません。
var map;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var bounds;
var pt1, pt2;
var rect;
function toLatLng(lat, lng) {
return new google.maps.LatLng(lat, lng);
}
function toBounds(j,k) {
var pts = [];
var latMin, latMax, lngMin, lngMax;
var sw, ne;
latMin = Math.min(j.lat(), k.lat());
latMax = Math.max(j.lat(), k.lat());
lngMin = Math.min(j.lng(), k.lng());
lngMax = Math.max(j.lng(), k.lng());
sw = toLatLng(latMin, lngMin);
ne = toLatLng(latMax, lngMax);
return new google.maps.LatLngBounds(sw, ne);
}
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
rect = new google.maps.Rectangle({
fillColor: "#FFFF00",
fillOpacity: 0.3,
strokeColor: "#0000FF",
strokeWeight: 2
});
// Activate the box
google.maps.event.addListener(map, 'click', function(event) {
pt1 = event.latLng;
rect.setMap(map);
});
// Modify the box's size
google.maps.event.addListener(map, 'mousemove', function(event) {
if(rect.getMap() == map) {
rect.setBounds(toBounds(pt1, event.latLng));
}
});
// Remove the zoom window and zoom in
google.maps.event.addListener(rect, 'click', function(event) {
rect.setMap(null);
pt2 = event.latLng;
myBounds = toBounds(pt1, pt2);
document.getElementById("selectedBounds").value = "new google.maps.LatLngBounds(new google.maps.LatLng" + myBounds.getSouthWest() + ", new google.maps.LatLng" + myBounds.getNorthEast() + ");";
});
// Allows shrinking the box
google.maps.event.addListener(rect, 'mousemove', function(event) {
if(rect.getMap() == map) {
rect.setBounds(toBounds(pt1, event.latLng));
}
});
}
HTML
<textarea id="selectedBounds" cols="60" rows="4"></textarea>
<div id="map_canvas"></div>
于 2012-06-09T01:09:25.290 に答える
0
反子午線に問題のない別の同様のツールがあります:http: //maps.forum.nu/gm_drag_polygon.html
マルセロ。
于 2012-06-09T07:26:02.420 に答える