Fatal编程技术网
  • jquery/
  • Jquery Google Maps API V3 fitbounds（）可缩小，但从不缩小

Jquery Google Maps API V3 fitbounds（）可缩小，但从不缩小

jquery google-maps google-maps-api-3

Jquery Google Maps API V3 fitbounds（）可缩小，但从不缩小,jquery,google-maps,google-maps-api-3,fitbounds,Jquery,Google Maps,Google Maps Api 3,Fitbounds,我创建了一个相当复杂的商店定位器。用户输入他们的zip，一个表返回结果和地图上相应的标记。他们可以在结果中翻页，标记会越来越远，而fitbounds（）函数非常适合缩小到合适的缩放级别以适应标记。问题是，如果您将页面调回较近的位置，fitbounds（）不会放大。即使您输入了一个新的搜索，它也不会围绕这些新标记进行放大——它会以它们为中心，但会保持以前的放大级别。我希望这是有道理的。如果有人知道我需要添加什么来放大更接近的结果，请帮助。以下是我在marker Push函数末尾调用的google函

我创建了一个相当复杂的商店定位器。用户输入他们的zip，一个表返回结果和地图上相应的标记。他们可以在结果中翻页，标记会越来越远，而
fitbounds（）
函数非常适合缩小到合适的缩放级别以适应标记。问题是，如果您将页面调回较近的位置，
fitbounds（）
不会放大。即使您输入了一个新的搜索，它也不会围绕这些新标记进行放大——它会以它们为中心，但会保持以前的放大级别。我希望这是有道理的。如果有人知道我需要添加什么来放大更接近的结果，请帮助。以下是我在marker Push函数末尾调用的google函数：

  map.setCenter(bounds.getCenter());
  map.panToBounds(bounds);
  map.fitBounds(bounds);
谢谢

map.setZoom(10);
我认为可以接受的范围是1-20。在我的经验中，只有整数和小数打破了地图。

没错，
fitBounds
只确保提供的边界是可见的。它没有放大到适当的级别

您可以先调用setZoom（20），然后再调用fitboods。

嗯，很有趣。。我使用PHP循环遍历所有（待）标记坐标，并计算西南和东北的值；起源的坐标介于两者之间。如果所有标记坐标彼此非常接近，则fitBounds设置的缩放因子远高于（放大）地图创建时使用的15。这就是我添加最后一行的原因

var map;

function mapInit() {
  var origin = new google.maps.LatLng(59.33344615, 18.0678188);
  var options = {
    zoom: 15,
    center: origin,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googlemap"), options);

  var southWest = new google.maps.LatLng(59.3308415, 18.0643054);
  var northEast = new google.maps.LatLng(59.3360508, 18.0713322);
  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

  google.maps.event.addListenerOnce(map, "idle", function() {
    if (map.getZoom() > 16) map.setZoom(16);
  });
因此，要么是谷歌在你发布问题后重新编程了该功能，要么。。我需要更多关于你代码的信息

fitBounds: function(bounds, mapId)
    {
        //bounds: bounds, id: map id
        if (bounds==null) return false;
        maps[mapId].fitBounds(bounds);
    },
这应该会有帮助，我使用这种方法，效果很好，在MapV2上有点不同。

这里不需要什么花哨的东西。首先拟合边界，然后平移到它。这将为您提供适当的缩放并包含整个边界

map.fitBounds(bounds);
map.panToBounds(bounds);
问题是：我们设置了

var bounds = new google.maps.LatLngBounds();
这样我们以后就可以把我们的标记放在地图上一个有边界的区域。GMaps将始终异步缩小到相应的fitBounds（），但不会放大以实现相同的效果（如@broady之前所述）。这对于许多应用程序来说并不理想，因为一旦您在地图上显示了一系列导致地图缩小的标记（可能当您调用
map.getBounds（）时
它返回的视口边缘有一点空白。由于此新边界比当前边界大，贴图将始终缩小。我可以通过避免完全使用当前贴图的边界并维护一个单独的LatLngBounds变量来解决此问题。每次我添加一个点时，我调用：

markersBounds.extend(newMarkersLatLng);
map.fitBounds(markersBounds);
map.panToBounds(markersBounds);
要删除点（我一直在添加点），可以使用第一个点创建一个新的LatLngBounds对象，然后扩展每个剩余点以获得新边界：

var markersBounds = new google.maps.LatLngBounds(markers[0].getPosition(),
                                                 markers[0].getPosition());
for(var i=1; i<markers.length; i++){
    markersBounds.extend(markers[i].getPosition());
}

map.fitBounds(markersBounds);
map.panToBounds(markersBounds);

var markersBounds=new google.maps.LatLngBounds（markers[0].getPosition（），
标记[0]。getPosition（））；

对于（var i=1；i我在使用新标记的同一地图上第二次调用fitBounds时，也遇到地图缩小的问题。这是对我有效的frankensolution：


// This is a stationary point tho dynamic will work too

var myLat = someLat,
    myLng = someLong;

var map = false,
    markersArray = [];

function makeOrderMap(lat, lng) { // pass in dynamic point when updating map

  var mapOptions = {
      center: new google.maps.LatLng(myLat, myLng),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  deleteOverlays(); // remove any existing markers..
  if(!map) {  
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  } 

  // Find the mid-point to center the map

  midLat = (parseFloat(lat) + parseFloat(myLat)) / 2;
  midLng = (parseFloat(lng) + parseFloat(myLng)) / 2;
  map.setCenter(new google.maps.LatLng(midLat, midLng));
  var newSpot = new google.maps.LatLng(lat, lng); 

  placeMarker(mapOptions.center);    
  placeMarker(newSpot);   

  // determine the distance between points for deciding the zoom level

  var dist = distHaversine(mapOptions.center, newSpot);

  var zoom = 10;
  if(dist < 1.25) {
    zoom = 15;
  } else if(dist < 2.5) {
    zoom = 14;
  } else if(dist < 5) {
    zoom = 13;
  } else if(dist < 10) {
    zoom = 12;
  } else if(dist < 20) {
    zoom = 11;
  }
  map.setZoom(zoom);  
}


rad = function(x) {return x*Math.PI/180;}

distHaversine = function(p1, p2) {
  var R = 6371; // earth's mean radius in km
  var dLat  = rad(p2.lat() - p1.lat());
  var dLong = rad(p2.lng() - p1.lng());

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;

  return d.toFixed(3);
}

function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    markersArray = [];    
    markersArray.length = 0;
    }    
}

function placeMarker(location, alt_icon) {

    var marker = new google.maps.Marker({
        position: location, 
        map: map
      });

    // add marker in markers array
    markersArray.push(marker);
}



//这是一个静态点，动态也可以工作
var myLat=someLat，
myLng=长一些；
var map=false，
markersArray=[]；
函数makeOrderMap（lat，lng）{//更新映射时传入动态点
变量映射选项={
中心：新google.maps.LatLng（myLat，myLng），
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
deleteOverlays（）；//删除所有现有标记。。
如果（！map）{
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
} 
//找到地图中心的中点
midLat=（parseFloat（lat）+parseFloat（myLat））/2；
midLng=（parseFloat（lng）+parseFloat（myLng））/2；
map.setCenter（新的google.maps.LatLng（midLat，midLng））；
var newSpot=newgoogle.maps.LatLng（lat，lng）；
placeMarker（mapOptions.center）；
地点标记（新闻点）；
//确定点之间的距离以确定缩放级别
var dist=distHaversine（mapOptions.center，newSpot）；
var=10；
如果（距离<1.25）{
缩放=15；
}否则如果（距离<2.5）{
缩放=14；
}否则如果（距离<5）{
缩放=13；
}否则如果（距离<10）{
缩放=12；
}否则，如果（距离<20）{
缩放=11；
}
map.setZoom（缩放）；
}
rad=函数（x）{return x*Math.PI/180；}
Distaversine=功能（p1，p2）{
var R=6371；//地球的平均半径，单位为km
var dLat=rad（p2.lat（）-p1.lat（））；
var dLong=rad（p2.lng（）-p1.lng（））；
变量a=Math.sin（dLat/2）*Math.sin（dLat/2）+
Math.cos（rad（p1.lat（））*Math.cos（rad（p2.lat（））*Math.sin（dLong/2）*Math.sin（dLong/2）；
var c=2*Math.atan2（Math.sqrt（a），Math.sqrt（1-a））；
var d=R*c；
返回d.toFixed（3）；
}
函数deleteOverlays（）{
if（markersArray）{
for（markersArray中的i）{
markersArray[i].setMap（空）；
}
markersArray=[]；
markersArray.length=0；
}    
}
功能位置标记（位置、alt_图标）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
//在标记数组中添加标记
markersArray.push（marker）；
}

我今天遇到了这个一般性问题，我想与大家分享一个解决方案。我意识到这与您的“商店定位器”问题略有不同，但它在许多方面都适用。在我的例子中，我在地图上有一组标记，正在添加一组，并希望确保所有标记现在都在视图中。此代码将检查每个现有标记，以确定是否存在标记ee如果它在视图中，并且在整个过程中，构建一个新的边界框，该边界框将包含所有的边界框（如果需要）。最后，如果发现任何边界框不在视图中，则会重置视图，使它们都在视图中

（这使用了Dojo的数组模块，它只是围绕基本数组迭代的一个方便的包装器）

我们可以很容易地修改它，以确保新的

var markersBounds = new google.maps.LatLngBounds(markers[0].getPosition(),
                                                 markers[0].getPosition());
for(var i=1; i<markers.length; i++){
    markersBounds.extend(markers[i].getPosition());
}

map.fitBounds(markersBounds);
map.panToBounds(markersBounds);



// This is a stationary point tho dynamic will work too

var myLat = someLat,
    myLng = someLong;

var map = false,
    markersArray = [];

function makeOrderMap(lat, lng) { // pass in dynamic point when updating map

  var mapOptions = {
      center: new google.maps.LatLng(myLat, myLng),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  deleteOverlays(); // remove any existing markers..
  if(!map) {  
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  } 

  // Find the mid-point to center the map

  midLat = (parseFloat(lat) + parseFloat(myLat)) / 2;
  midLng = (parseFloat(lng) + parseFloat(myLng)) / 2;
  map.setCenter(new google.maps.LatLng(midLat, midLng));
  var newSpot = new google.maps.LatLng(lat, lng); 

  placeMarker(mapOptions.center);    
  placeMarker(newSpot);   

  // determine the distance between points for deciding the zoom level

  var dist = distHaversine(mapOptions.center, newSpot);

  var zoom = 10;
  if(dist < 1.25) {
    zoom = 15;
  } else if(dist < 2.5) {
    zoom = 14;
  } else if(dist < 5) {
    zoom = 13;
  } else if(dist < 10) {
    zoom = 12;
  } else if(dist < 20) {
    zoom = 11;
  }
  map.setZoom(zoom);  
}


rad = function(x) {return x*Math.PI/180;}

distHaversine = function(p1, p2) {
  var R = 6371; // earth's mean radius in km
  var dLat  = rad(p2.lat() - p1.lat());
  var dLong = rad(p2.lng() - p1.lng());

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;

  return d.toFixed(3);
}

function deleteOverlays() {
    if (markersArray) {
        for (i in markersArray) {
            markersArray[i].setMap(null);
        }
    markersArray = [];    
    markersArray.length = 0;
    }    
}

function placeMarker(location, alt_icon) {

    var marker = new google.maps.Marker({
        position: location, 
        map: map
      });

    // add marker in markers array
    markersArray.push(marker);
}



var origBounds = map.getBounds(),
    newBounds = new google.maps.LatLngBounds(null),
    anyFailed = false;
array.forEach(markers, function (m) {
    newBounds.extend(m.position);
    if (!origBounds.contains(m.position)) {
        anyFailed = true;
    }
});
if (anyFailed) {
    map.setCenter(newBounds.getCenter());
    map.fitBounds(newBounds);
}



function initMap() {
    var mapOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        minZoom: 1
    };
    map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
    google.maps.event.addListenerOnce(map, 'idle', function() {
        //Map is ready
        worldViewFit(map);
    });
}
function worldViewFit(mapObj) {
    var worldBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(70.4043,-143.5291),  //Top-left
        new google.maps.LatLng(-46.11251, 163.4288)  //Bottom-right
    );
    mapObj.fitBounds(worldBounds, 0);
    var actualBounds = mapObj.getBounds();
    if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
        mapObj.setZoom(mapObj.getZoom()+1);
    }
}



.google-map {
  width: 100%;
  height: 0px;
  transition: all 0.5s ease;
}

.google-map.loaded {
    height: 400px;
}




map.markers.forEach( (marker) => {
  var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng())
  bounds.extend(latlng)
})



map.markers.forEach( (marker) => {
  // check if map marker is in this.markers (to make sure only current)
  for (const [key, value] of Object.entries(markers)) {
    if (marker == value) {
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng())
      bounds.extend(latlng)
    }
  }
})