Google Maps API v3: ฉันสามารถตั้งค่าZoomหลังจาก fitBounds ได้หรือไม่

ฉันมีชุดของจุดที่ฉันต้องการพล็อตบน Google Map แบบฝัง (API v3) ฉันต้องการให้ขอบเขตรองรับทุกจุดยกเว้นว่าระดับการซูมนั้นต่ำเกินไป (เช่นซูมออกมากเกินไป) แนวทางของฉันเป็นเช่นนี้:

var bounds = new google.maps.LatLngBounds();

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

มันใช้งานไม่ได้ บรรทัดสุดท้าย "gmap.setZoom ()" จะไม่เปลี่ยนระดับการซูมของแผนที่หากถูกเรียกหลังจาก fitBounds โดยตรง

มีวิธีในการรับระดับการย่อ / ขยายขอบเขตโดยไม่ใช้กับแผนที่หรือไม่ ความคิดอื่นที่จะแก้ปัญหานี้?

แก้ไข : ดูความคิดเห็นของ Matt Diamond ด้านล่าง

เข้าใจแล้ว! ลองสิ่งนี้:

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});

ปรับเปลี่ยนตามความต้องการของคุณ

ฉันแก้ไขปัญหาที่คล้ายกันในหนึ่งในแอพของฉัน ฉันสับสนเล็กน้อยกับคำอธิบายปัญหาของคุณ แต่ฉันคิดว่าคุณมีเป้าหมายเดียวกันกับที่ฉันมี ...

ในแอพของฉันฉันต้องการพล็อตเครื่องหมายอย่างน้อยหนึ่งเครื่องหมายและตรวจสอบให้แน่ใจว่าแผนที่แสดงให้พวกเขาเห็นทั้งหมด ปัญหาคือถ้าฉันพึ่งพาวิธี fitBounds เพียงอย่างเดียวแล้วระดับการซูมจะถูกปรับให้สูงสุดเมื่อมีจุดเดียว - นั่นไม่ดี

วิธีแก้ปัญหาคือการใช้ fitBounds เมื่อมีหลายจุดและ setCenter + setZoom เมื่อมีเพียงจุดเดียว

if (pointCount > 1) {
  map.fitBounds(mapBounds);
}
else if (pointCount == 1) {
  map.setCenter(mapBounds.getCenter());
  map.setZoom(14);
}

ฉันมาที่หน้านี้หลายครั้งเพื่อรับคำตอบและในขณะที่คำตอบที่มีอยู่ทั้งหมดเป็นประโยชน์อย่างมากพวกเขาไม่ได้แก้ปัญหาของฉันอย่างแน่นอน

google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
    var oldZoom = googleMap.getZoom();
    googleMap.setZoom(oldZoom - 1); //Or whatever
});

โดยทั่วไปฉันพบว่าเหตุการณ์ 'zoom_changed' ทำให้ UI ของแผนที่ไม่สามารถ "ข้าม" ซึ่งเกิดขึ้นเมื่อฉันรอกิจกรรม 'ว่าง'

หวังว่านี่จะช่วยใครซักคน!

ฉันเพิ่งแก้ไขปัญหานี้โดยการตั้งค่า maxZoom ล่วงหน้าแล้วลบออกหลังจากนั้น ตัวอย่างเช่น:

map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });

หากฉันไม่เข้าใจผิดฉันถือว่าคุณต้องการให้คะแนนทั้งหมดของคุณปรากฏบนแผนที่ด้วยระดับการซูมสูงสุดที่เป็นไปได้ ฉันทำสิ่งนี้สำเร็จโดยเริ่มต้นระดับการซูมของแผนที่เป็น16 (ไม่แน่ใจว่าเป็นระดับการซูมสูงสุดที่เป็นไปได้ใน V3)

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 16,
  center: marker_point,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

หลังจากนั้นฉันก็ทำสิ่งต่าง ๆ :

var bounds = new google.maps.LatLngBounds();

// You can have a loop here of all you marker points
// Begin loop
bounds.extend(marker_point);
// End loop

map.fitBounds(bounds);

ผลลัพธ์: สำเร็จ!

ฉันใช้:

gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less

วิธีนี้จะใช้ขนาดที่เล็กกว่า 24 และระดับการซูมที่จำเป็นตามรหัสของคุณอย่างไรก็ตามมันอาจจะเป็นการเปลี่ยนการซูมต่อไปและไม่สนใจว่าคุณจะซูมออกเท่าใด

โปรดลองสิ่งนี้:

map.fitBounds(bounds);

// CHANGE ZOOM LEVEL AFTER FITBOUNDS
zoomChangeBoundsListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  if (this.getZoom()){
    this.setZoom(15);
  }
});
setTimeout(function(){
  google.maps.event.removeListener(zoomChangeBoundsListener)
}, 2000);

ฉันมีปัญหาเดียวกันและฉันสามารถแก้ไขได้โดยใช้รหัสต่อไปนี้ เหตุการณ์ listener ( google.maps.addListenerOnce()) นี้จะถูกไล่ออกหนึ่งครั้งเท่านั้นหลังจากmap.fitBounds()ดำเนินการแล้ว ดังนั้นไม่จำเป็นต้องมี

1. ติดตามและลบผู้ฟังด้วยตนเองหรือ
2. idleรอจนกว่าแผนที่จะ

มันตั้งค่าระดับการซูมที่เหมาะสมในขั้นต้นและอนุญาตให้ผู้ใช้ซูมเข้าและออกผ่านระดับการซูมเริ่มต้นเนื่องจากฟังเหตุการณ์หมดอายุแล้ว ตัวอย่างเช่นหากgoogle.maps.addListener()ถูกเรียกเท่านั้นผู้ใช้จะไม่สามารถซูมผ่านระดับการซูมที่ระบุได้ (ในกรณีที่ 4) นับตั้งแต่เราดำเนินgoogle.maps.addListenerOnce()การผู้ใช้จะสามารถซูมไปที่ระดับใดก็ได้ที่เขา / เธอเลือก

map.fitBounds(bounds);

var zoom_level_for_one_marker = 4;

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event){
   if (this.getZoom() >= zoom_level_for_one_marker){  
       this.setZoom(zoom_level_for_one_marker) 
   }
});

มีปัญหาเดียวกันจำเป็นต้องใส่เครื่องหมายหลายอันบนแผนที่ สิ่งนี้แก้ไขกรณีของฉัน:

1. ประกาศขอบเขต
2. ใช้รูปแบบที่จัดทำโดย koderoid (สำหรับชุดเครื่องหมายแต่ละชุดbounds.extend(objLatLng))

3. ดำเนินการแผนที่พอดีหลังจากเสร็จสิ้น:

   google.maps.event.addListenerOnce(map, 'idle', function() { 
       map.fitBounds( bounds );
   });

ฉันพบวิธีแก้ไขปัญหาที่ตรวจสอบก่อนโทรfitBoundsดังนั้นคุณจึงไม่ต้องซูมเข้าและซูมออกอย่างกระทันหัน

var bounds = new google.maps.LatLngBounds();

// extend bounds with each point

var minLatSpan = 0.001;
if (bounds.toSpan().lat() > minLatSpan) {
    gmap.fitBounds(bounds); 
} else {
    gmap.setCenter(bounds.getCenter());
    gmap.setZoom(16);
}

คุณจะต้องเล่นกับตัวแปร minLatSpan เล็กน้อยเพื่อให้ได้ตามที่คุณต้องการ มันจะแตกต่างกันไปตามทั้งระดับซูมและขนาดของผืนผ้าใบแผนที่

คุณสามารถใช้ลองจิจูดแทนละติจูดได้

ฉันเห็นวิธีแก้ไขปัญหาที่ไม่ถูกต้องหรือซับซ้อนจำนวนมากดังนั้นตัดสินใจโพสต์วิธีแก้ปัญหาที่สง่างามและใช้งานได้ได้

เหตุผลsetZoom()ไม่ทำงานตามที่คุณคาดหวังว่าfitBounds()เป็นแบบอะซิงโครนัสดังนั้นจึงไม่รับประกันว่าจะอัปเดตการซูมทันที แต่การโทรของคุณไปที่setZoom()ต้องอาศัยสิ่งนั้น

สิ่งที่คุณอาจพิจารณาคือการตั้งค่าminZoomตัวเลือกแผนที่ก่อนโทรfitBounds()แล้วล้างหลังจากเสร็จสิ้น (เพื่อให้ผู้ใช้ยังคงสามารถย่อด้วยตนเองได้หากต้องการ):

var bounds = new google.maps.LatLngBounds();
// ... (extend bounds with all points you want to fit)

// Ensure the map does not get too zoomed out when fitting the bounds.
gmap.setOptions({minZoom: 6});
// Clear the minZoom only after the map fits the bounds (note that
// fitBounds() is asynchronous). The 'idle' event fires when the map
// becomes idle after panning or zooming.
google.maps.event.addListenerOnce(gmap, 'idle', function() {
  gmap.setOptions({minZoom: null});
});

gmap.fitBounds(bounds);

นอกจากนี้หากคุณต้องการ จำกัด การซูมสูงสุดคุณสามารถใช้เคล็ดลับเดียวกันกับ maxZoomคุณสมบัติ

ดูเอกสาร MapOptions เพื่อเลือก

ฉันใช้สิ่งนี้เพื่อให้แน่ใจว่าระดับการซูมไม่เกินระดับที่ตั้งไว้เพื่อให้ฉันรู้ว่าภาพถ่ายดาวเทียมจะสามารถใช้ได้

เพิ่มผู้ฟังไปที่ zoom_changedเหตุการณ์ สิ่งนี้มีประโยชน์เพิ่มเติมในการควบคุมการควบคุมการซูมบน UI เช่นกัน

ดำเนินการเฉพาะในsetZoomกรณีที่คุณต้องการดังนั้นifคำสั่งจึงเป็นที่ต้องการMath.maxหรือMath.min

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() > 19 ) { 
        map.setZoom(19); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

วิธีป้องกันการซูมออกมากเกินไป:

   google.maps.event.addListener(map, 'zoom_changed', function() { 
      if ( map.getZoom() < 6 ) { 
        map.setZoom(6); 
      } 
    });
    bounds = new google.maps.LatLngBounds( ... your bounds ... )
    map.fitBounds(bounds);

ในฟังก์ชั่นนี้คุณจะต้องเพิ่มข้อมูลเมตาแบบไดนามิกเพื่อจัดเก็บประเภทรูปทรงเรขาคณิตเท่านั้นเนื่องจากฟังก์ชันยอมรับรูปทรงเรขาคณิตใด ๆ

"fitGeometries" เป็นฟังก์ชัน JSON ที่ขยายวัตถุแผนที่

"geometries" เป็นอาร์เรย์จาวาสคริปต์ทั่วไปที่ไม่ใช่ MVCArray ()

geometry.metadata = { type: "point" };
var geometries = [geometry];

fitGeometries: function (geometries) {
    // go and determine the latLngBounds...
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < geometries.length; i++) {
        var geometry = geometries[i];
        switch (geometry.metadata.type)
        {
            case "point":
                var point = geometry.getPosition();
                bounds.extend(point);
                break;
            case "polyline":
            case "polygon": // Will only get first path
                var path = geometry.getPath();
                for (var j = 0; j < path.getLength(); j++) {
                    var point = path.getAt(j);
                    bounds.extend(point);
                }
                break;
        }
    }
    this.getMap().fitBounds(bounds);
},

งานนี้สำหรับฉันด้วย API v3 แต่ด้วยการตั้งค่าซูมคงที่:

var bounds = new google.maps.LatLngBounds();
// extend bounds with each point

gmap.setCenter(bounds.getCenter()); 
gmap.setZoom( 6 );

เช่นเดียวกับฉันถ้าคุณไม่เต็มใจที่จะเล่นกับผู้ฟังนี่เป็นวิธีง่ายๆที่ฉันคิดขึ้นมา: เพิ่มวิธีการบนแผนที่ซึ่งทำงานอย่างเคร่งครัดตามความต้องการของคุณเช่นนี้:

    map.fitLmtdBounds = function(bounds, min, max){
        if(bounds.isEmpty()) return;
        if(typeof min == "undefined") min = 5;
        if(typeof max == "undefined") max = 15;

        var tMin = this.minZoom, tMax = this.maxZoom;
        this.setOptions({minZoom:min, maxZoom:max});
        this.fitBounds(bounds);
        this.setOptions({minZoom:tMin, maxZoom:tMax});
    }

จากนั้นคุณสามารถโทรหาmap.fitLmtdBounds(bounds)แทนที่จะmap.fitBounds(bounds)ตั้งค่าขอบเขตภายใต้ช่วงซูมที่กำหนด ... หรือmap.fitLmtdBounds(bounds,3,5)เพื่อแทนที่ช่วงซูม ..

โปรดลองสิ่งนี้

// Find out what the map's zoom level is
zoom = map.getZoom();
if (zoom == 1) {
  // If the zoom level is that low, means it's looking around the
world.
  // Swap the sw and ne coords
  viewportBounds = new
google.maps.LatLngBounds(results[0].geometry.location, initialLatLng);
  map.fitBounds(viewportBounds);
}

ถ้าสิ่งนี้จะเป็นประโยชน์กับคุณ

ทั้งหมดที่ดีที่สุด

หลังจากการคำนวณขอบเขตคุณสามารถตรวจสอบระยะห่างระหว่างมุมบนซ้ายและขวาล่าง; จากนั้นคุณสามารถเข้าใจระดับการซูมโดยการทดสอบระยะทาง (หากระยะทางไกลเกินระดับการซูมจะต่ำ) จากนั้นคุณสามารถเลือกวิธีการตั้งค่าโดยใช้วิธี setbound หรือ setZoom

ฉันไม่ชอบที่จะแนะนำ แต่ถ้าคุณต้องลอง - โทรครั้งแรก

gmap.fitBounds(bounds);

จากนั้นสร้างเธรดใหม่ / AsyncTask ให้มันสลีปเป็นเวลา 20-50ms หรือมากกว่านั้นแล้วโทร

gmap.setZoom( Math.max(6, gmap.getZoom()) );

จากเธรด UI (ใช้ตัวจัดการหรือ onPostExecuteวิธีสำหรับ AsyncTask)

ฉันไม่รู้ว่ามันใช้งานได้ดีแค่คำแนะนำ นอกจากนั้นคุณจะต้องคำนวณระดับการซูมจากคะแนนของคุณด้วยตัวเองตรวจสอบว่ามันต่ำเกินไปแก้ไขให้ถูกต้องแล้วโทรgmap.setZoom(correctedZoom)

หาก 'bounds_changed' ยิงไม่ถูกต้อง (บางครั้ง Google ดูเหมือนจะไม่ยอมรับพิกัดอย่างสมบูรณ์) ให้ลองใช้ 'center_changed' แทน

เหตุการณ์ 'center_changed' เริ่มทำงานทุกครั้งที่มีการเรียก fitBounds () ถึงแม้ว่าจะทำงานทันทีและไม่จำเป็นหลังจากแผนที่เคลื่อนที่

ในกรณีปกติ 'ว่าง' ยังคงเป็นผู้ฟังเหตุการณ์ที่ดีที่สุด แต่อาจช่วยให้คนสองคนที่พบเจอปัญหาแปลก ๆ ด้วยการโทร fitBounds ()

ดูแผนที่ google พอดีขอบเขตการโทรกลับ

หากต้องการพูดคุยกับโซลูชันอื่น - ฉันพบว่า "ฟัง bounds_changed เหตุการณ์แล้วตั้งค่าการซูมใหม่" ไม่ทำงานอย่างน่าเชื่อถือสำหรับฉัน ฉันคิดว่าบางครั้งฉันก็โทรfitBoundsมาก่อนที่แผนที่จะเริ่มต้นอย่างสมบูรณ์และการเริ่มต้นทำให้เกิดเหตุการณ์ bounds_changed ที่จะใช้ผู้ฟังขึ้นก่อนที่จะfitBoundsเปลี่ยนขอบเขตและระดับการซูม ฉันลงเอยด้วยรหัสนี้ซึ่งดูเหมือนจะทำงานได้:

// If there's only one marker, or if the markers are all super close together,
// `fitBounds` can zoom in too far. We want to limit the maximum zoom it can
// use.
//
// `fitBounds` is asynchronous, so we need to wait until the bounds have
// changed before we know what the new zoom is, using an event handler.
//
// Sometimes this handler gets triggered by a different event, before
// `fitBounds` takes effect; that particularly seems to happen if the map
// hasn't been fully initialized yet. So we don't immediately remove the
// listener; instead, we wait until the 'idle' event, and remove it then.
//
// But 'idle' might happen before 'bounds_changed', so we can't set up the
// removal handler immediately. Set it up in the first event handler.

var removeListener = null;
var listener = google.maps.event.addListener(map, 'bounds_changed', () => {
  console.log(map.getZoom());
  if (map.getZoom() > 15) {
    map.setZoom(15);
  }

  if (!removeListener) {
    removeListener = google.maps.event.addListenerOnce(map, 'idle', () => {
      console.log('remove');
      google.maps.event.removeListener(listener);
    });
  }
});

สำหรับฉันทางออกที่ง่ายที่สุดคือ:

map.fitBounds(bounds);

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
}
setTimeout(set_zoom, 5);

google.maps.event.addListener(marker, 'dblclick', function () {
    var oldZoom = map.getZoom(); 
    map.setCenter(this.getPosition());
    map.setZoom(parseInt(oldZoom) + 1);
});

ทั้งหมดที่ฉันทำคือ:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

และใช้งานได้กับ V3 API