0

ドラッグ可能なマーカーを備えた作業バージョンのマップがあります。すべてのマーカーが機能するようにズームイン

bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

results[0].geometry.location新しいドラッグ可能な場所はどこですか。

これは、新しい場所がより大きな領域を形成している場合に機能します。しかし、マーカーを残りのマーカーに近い場所にドラッグすると、これが境界を拡張するとは思わないため、ズームインしません。

何か案が？

4

1 に答える 1

0

マーカーをドロップすると、元の境界を含む一時的な LatLngBounds オブジェクトにマーカーの位置が追加され、ドラッグ ドロップごとにマップの境界がそれに合わせられます。

var mapOptions = {
  center: new google.maps.LatLng(38.68551, -96.341308),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

var bounds = new google.maps.LatLngBounds(),
    markers = [];

markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.69, -96.14),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.65, -96.44),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.56, -96.56),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.42, -96.98),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.31, -96.45),map: map}));

for (var m in markers) {
    bounds.extend(markers[m].getPosition());
}

map.fitBounds(bounds);

var dropMarker = function(latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map}),
        tempBounds = new google.maps.LatLngBounds();

     // notice we use the union method here to add the original bounds object
    tempBounds.union(bounds).extend(marker.getPosition());
    map.fitBounds(tempBounds);
}

// imitate dropping marker far away from others
setTimeout(function() {
    dropMarker(new google.maps.LatLng(31, -96));
}, 2000);

// imitate dropping marker close to others
setTimeout(function() {
    dropMarker(new google.maps.LatLng(38.5, -96.5));
}, 5000);

一時的な境界を合わせるだけでなく、マップの panToBounds メソッドを試して、滑らかな遷移を得ることができます。

于 2012-12-29T12:39:52.583 に答える