Google Maps v3 fitBounds縮放不一致

Question

有一個非常奇怪的問題。

答：我的地圖的一種方法效果很好。 用戶設置起點和終點，並創建地圖，並且fitBounds.extend（bounds）適當設置縮放級別以包含地圖上的開始/結束標記。

B：第二種方法是，如果用戶設置起點但未設置終點，但基於其他用戶興趣，我將獲取它們的檢索和終點，並使用與方法A相同的功能將其繪制在地圖上。 fitBounds.extend（bounds）它將縮放級別設置為4（國家/地區）。 然后，我必須強制設置縮放比例。

用戶在任何時候執行方法A（在方法B之前或之后）都沒有關系...當方法A時，縮放級別正確。 當其方法B始終縮放至級別4時。

...但都使用相同的功能。

兩種方法都可以將標記准確地放置在地圖上，並准確繪制標記之間的路線。 僅在方法A上，自動縮放正確，在方法B上，縮放始終設置為4。

如果用戶執行A，則它的權利...然后發生B，它的縮小...再次執行B，它保持縮小...再次執行A，它又返回到適當的縮放。

讓我瘋了！

我的地圖對象是“ setMap”，它是一個全局變量

function setMapBounds(start,end) {
  mapBounds = new google.maps.LatLngBounds();
  mapBounds.extend(start.position);
  mapBounds.extend(end.position) ;
  setMap.fitBounds(mapBounds) ;
}

function addMarkers(newMarkers) {  // an array of map points.
  var tempMarkers = [] ;

  for (var x=0;x<newMarkers.length;x++) {
    var tempLatlon = new google.maps.LatLng(newMarkers[x].lat,newMarkers[x].lon) ;
    var tempMarker = createMarker(tempLatlon,newMarkers[x].img,newMarkers[x].title) ;
    tempMarkers.push(tempMarker) ;
  }
  return tempMarkers ;
}

function createMarker(latlon,img,title) {
  var marker = new google.maps.Marker({
    map:setMap,
    position:latlon,
    icon: img,
    title:title
  }) ;
  return marker ;
}

//這是方法A-總是正確設置縮放比例

function setDropoff(dropoffLoc) {  //called from: index.js/setPickup(), tab-map.html
    geoCoder.geocode({'address': dropoffLoc}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        endLocation = dropoffLoc ;
        endLat = results[0].geometry.location.lat() ;
        endLon = results[0].geometry.location.lng() ;
        // first clear any existing END Markers only.
        while(markersArray.length) { 
          markersArray.pop().setMap(null); 
        }
        endPointSet = 1 ;
        endLatlon = new google.maps.LatLng(endLat,endLon) ;
        var endMarker = createMarker(endLatlon,'img/red-pin.png','Drop off') ;
        markersArray.push(endMarker) ;
        setMapBounds(userMarker,endMarker) ;

        if (startPointSet == 1) {
          drawRoute("DRIVING",startLocation,endLocation) ;
        } 
      }
    } else {
        error = "Address not found."
    }
  });
}

//這是方法B，它總是將縮小縮小到4。將其拉出另一個測試功能，以測試用戶是否手動設置了終點。如果是這樣，則在用戶設置的起點/終點之間添加wayPoints點。 如果不是，則將地圖設置為用戶起點到感興趣的單個終點

if (endPointSet == 1) {  // draw Pickup to START to wayPoints to END
    var markers = [
      {lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Pickup"},
      {lat:interests[1].ehub_lat,lon:interests[1].ehub_lon,img:interests[1].img,title:"Dropoff"}
    ] ;
    var points = [interests.shub_address,interests.ehub_address] ;
    extraMarkers = addMarkers(markers) ;
    drawRoute("BICYCLING",startLocation,endLocation,points) ;
  } else {  
    var markers = [
      {lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Dropoff"}
      ] ;

    extraMarkers = addMarkers(markers) ;
    setMapBounds(userMarker,extraMarkers[0]) ;
    drawRoute("WALKING",startLocation,interests[0].shub_address) ;
  }
}

這是從方法B中的else傳遞到setMapBounds的對象。起點由用戶設置...但未設置終點，我為它們選擇了一個。 第一個對象是開始，第二個對象是結束。

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…} 
Lf: Object 
... 
  position: pf 
    D: -82.49799999999999 
    k: 27.873196 
... 

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 602, gm_bindings_: Object…} 
Lf: Object 
... 
  position: pf 
    D: -82.47631678090198 
    k: 27.9374560148825 
...

這是從方法A傳遞到setMapBounds的對象，用戶在其中設置相同的起點和終點。 您可以看到方法A和方法B的起點相同。

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…} 
  Lf: Object 
  ... 
  position: pf 
    D: -82.49799999999999 
    k: 27.873196 
... 

Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 703, gm_bindings_: Object…} 
  Lf: Object 
  ... 
  position: pf 
    D: -82.45717760000002 
    k: 27.950575 
  ...

Answer 1

我正在制作類似的應用程序，而我正在使用的代碼是：

var start;
var end;

function updateMap(name, obj){ //obj is a form input i.e. <input type="text">
  var marker = (name==='start')?start:end;
  geocoder.geocode({address:obj.value}, function(results, status){

    //get coords/check if is valid place
    if(status === google.maps.GeocoderStatus.OK){

      //get info, store in new marker
      marker.setPosition(results[0].geometry.location);
      marker.setTitle(obj.value);

      //if both markers present
      if(start.getPosition() && end.getPosition()){
        map.fitBounds(new google.maps.LatLngBounds(start.getPosition(), end.getPosition()));
      }else{

        //otherwise, if one marker
        map.setCenter(marker.getPosition());
        map.setZoom(15);
      }
      marker.setMap(map);
    }else if(status === google.maps.GeocoderStatus.ZERO_RESULTS){
      alert('There is an issue with address. Please refer to the "Help" link.');
    }else{
      setTimeout(function(){
        updateMap(marker, obj);
      }, 200);
    }
  });
}

這是從文本輸入中獲取參數，對其進行地理編碼，然后在地圖上放置標記。 該函數由form元素上的onchange事件觸發。 這可以輕松地適合您自己的用法。 如果只有一個點，我只是設置一個默認的縮放值（通常非常靠近街道，盡管您可以根據需要進行調整）。

至於您為什么不起作用的問題，我可以對整個代碼進行更好的猜測。 就目前而言，我認為這與區域偏向有關，或者僅僅是一個錯誤。 解決它可能是最好的選擇。