これはthis questionとよく似ています。すべてのマーカーが現在のズームレベルで表示されていることを確認したいと思います。しかし、あらかじめ中心点(ユーザの現在位置)を選んでおきたい。円がマーカーであり、正方形が私の意図する中心点である場合、下の画像では、リンクされたソリューションは最初の(左上の)画像を作成します。私は2番目(右、下)の画像が欲しいです。Google Maps API 3 - すべてのマーカーを画面に表示しますが、センターポイントを保持する
2
A
答えて
2
あなたはLatLngBounds
オブジェクトを作成し、マーカーの座標のそれぞれでそれを拡張することができます。次に、あなたの境界オブジェクトを北東と南西の座標にし、これらの座標が現在のマップ境界内に含まれているかどうかを確認します。そうでない場合は、ズームアウトしてもう一度お試しください。
以下のコードのほとんどは、特定の範囲内でランダムなマーカーを生成することです。本当に興味深い部分は、bounds.extend(position)
とfitAllBounds
の機能です。
var map, bounds;
function initialize() {
var southWest = new google.maps.LatLng(40, -70);
var northEast = new google.maps.LatLng(35, -80);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var center = new google.maps.LatLng(40, -70);
map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Add center marker
new google.maps.Marker({
position: center,
label: 'C',
map: map
});
// Create the bounds object
bounds = new google.maps.LatLngBounds();
// Create random markers
for (var i = 0; i < 20; i++) {
// Calculate a random position
var position = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: position,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.setZoom(5);
map.setCenter(marker.position);
}
})(marker, i));
// Extend the bounds with the last marker position
bounds.extend(position);
}
// Fit all bounds once, when the map is ready
google.maps.event.addListenerOnce(map, 'idle', function() {
fitAllBounds(bounds);
});
}
function fitAllBounds(b) {
// Get north east and south west markers bounds coordinates
var ne = b.getNorthEast();
var sw = b.getSouthWest();
\t // Get the current map bounds
var mapBounds = map.getBounds();
// Check if map bounds contains both north east and south west points
if (mapBounds.contains(ne) && mapBounds.contains(sw)) {
// Everything fits
return;
} else {
var mapZoom = map.getZoom();
if (mapZoom > 0) {
// Zoom out
map.setZoom(mapZoom - 1);
// Try again
fitAllBounds(b);
}
}
}
initialize();
#map-canvas {
height: 200px;
width: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
ここでは、JSFiddleにもあります:
関連する問題
- 1. Google Maps APIにグレーの画面が表示される
- 2. Google Static Maps APIのpoi.businessマーカー/ラベルを非表示にする
- 3. js google maps暗い画面を表示
- 4. jQueryでGoogle Maps APIマーカーを非表示にする方法
- 5. Google Maps APIマーカーの位置を非表示のフィールドに戻す
- 6. google maps apiは画面上の地図のみを表示します
- 7. すべてのマーカーに同じ情報ウィンドウを表示するGoogleマップapi
- 8. Google Maps API - マーカー
- 9. Google Maps API - ズームアウト時にすべてのローカル道路を表示
- 10. Google Maps API V3のマーカーをプロットする
- 11. Google maps apiマーカー情報をサイドバーに表示
- 12. Google Maps API Android - すべてのマーカーとインフォウィンドウを含むセンターカメラ
- 13. Google Maps JS API + JSON - 複数のマーカーが表示されない
- 14. ズームレベル3でGoogleマップのマーカーを非表示にする
- 15. 画面にジャンプすることなくマーカーを表示する
- 16. Google Maps API V3のPHPの値に基づいて異なるマーカーを表示
- 17. react-google-mapsで複数のマーカーを表示するには
- 18. Google Maps API 3 - PHPを使用してMySQL DBからマーカーを抽出する
- 19. Google Map API 3:円内にマーカーのみを表示しますか?
- 20. google maps API 3がfitBoundsをズームアウトする
- 21. Google Maps SDKの他のすべてのマーカーにマーカーを設定するiOS
- 22. Google Maps API v2 Androidのシェイプドローブをマーカーとして追加する
- 23. Google Maps API:もう持っていないマーカーを削除しますか?
- 24. マップを非表示にしてマーカーのみを表示することはできますか?Android Google Maps
- 25. Googleマップ上のすべてのマーカーapi 3 map open same infowindow
- 26. Google Maps API、すべてのマーカーが同じ情報ウィンドウを開く
- 27. Google Maps API v2グレーの画面
- 28. MVC 3にGoogle Maps v3を表示していません
- 29. Google Maps API v3カスタム画像オーバーレイのマーカーですか?
- 30. Google Maps API - ポリラインに沿って定義した点のポリラインでドラッグ可能なマーカーを保持する