Google Maps v3 fitBounds不一致缩放

时间:2015-06-11 22:39:20

标签: javascript google-maps-api-3 zoom fitbounds

有一个非常奇怪的问题。

答:我的地图的一种方法很好。用户设置起点和终点并创建贴图,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开始/结束点。如果没有,则将map设置为用户起点到单个终点[/ p>

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的对象。起始点由User设置...但没有设置端点,我为它们选择一个。第一个对象是开始,第二个对象是结束。

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 
  ...

1 个答案:

答案 0 :(得分:0)

我正在制作类似的应用程序,我使用的代码是:

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);
    }
  });
}

这样做是从文本输入中获取参数,对其进行地理编码,并在地图上放置标记。该函数由表单元素上的onchange事件触发。这可以很容易地适应您自己的使用。如果只有一个点,我只是选择了一个默认的缩放值(通常非常接近街道,但你可以根据需要进行调整)。

至于你为什么不工作的问题,我可以用整个代码制定一个更好的猜测。现在,我认为它与区域偏置有关,或者它只是一个bug。可能最好解决它。