Google Maps API 3 - 在屏幕上显示所有标记，但保留Centerpoint [英] Google Maps API 3 - Show All Markers on Screen, but Keep Centerpoint

问题描述

这与

解决方案

您可以创建 LatLngBounds 对象并对其进行扩展与每个标记坐标。然后获取您的边界对象东北和西南坐标，并检查这些坐标是否包含在当前地图边界内。如果没有，请缩小并重试。

以下大多数代码都是在特定范围内生成随机标记。真正有趣的部分是我调用 bounds.extend（position）和 fitAllBounds 函数。

  var map，bounds; function initialize（）{var southWest = new google.maps.LatLng（ 40，-70）; var northEast = new google.maps.LatLng（35，-80）; var lngSpan = northEast.lng（） -  southWest.lng（）; var latSpan = northEast.lat（） -  southWest.lat（）; var center = new google.maps.LatLng（40，-70）; map = new google.maps.Map（document.getElementById（map-canvas），{zoom：12，center：center，mapTypeId：google.maps.MapTypeId.ROADMAP}）; //添加中心标记new google.maps.Marker（{position：center，label：'C'，map：map}）; //创建边界对象bounds = new google.maps.LatLngBounds（）; //为（var i = 0; i< 20; i ++）创建随机标记{//计算随机位置var position = new google.maps.LatLng（southWest.lat（）+ latSpan * Math.random（）， southWest.lng（）+ lngSpan * Math.random（））; var marker = new google.maps.Marker（{position：position，map：map}）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{map.setZoom（5）; map.setCenter（marker.position）;}}）（marker，i ））; //使用最后一个标记位置bounds.extend（position）扩展边界; } //适应所有边界一次，当地图准备好时google.maps.event.addListenerOnce（map，'idle'，function（）{fitAllBounds（bounds）;}）;} function fitAllBounds（b）{//向北东西南标记边界坐标var ne = b.getNorthEast（）; var sw = b.getSouthWest（）; //获取当前地图边界var mapBounds = map.getBounds（）; //检查地图边界是否包含东北和西南点if（mapBounds.contains（ne）&& mapBounds.contains（sw））{// Everything适合返回; } else {var mapZoom = map.getZoom（）; if（mapZoom> 0）{//缩小map.setZoom（mapZoom  -  1）; //再试一次fitAllBounds（b）; } initialize（）;  

  #map-canvas {身高：200px;宽度：200px;}  

 < div id =map -canvas>< / div>< script src =https://maps.googleapis.com/maps/api/js>< / script>  

这里也是JSFiddle：

JSFiddle演示

This is very similar to this question. I would like to ensure that all markers are shown at the current zoom level. However, I would also like to choose the center point beforehand (current location of user). If circles are markers, and the square is my intended centerpoint, in the images below, the linked solution would create the first (left, top) image. I would like the second (right, bottom) image.

解决方案

You can create a LatLngBounds object and extend it with each of your markers coordinates. Then get your bounds object north east and south west coordinates and check whether theses coordinates are contained within the current map bounds. If not, zoom out and try again.

Most of the below code is to generate random markers within certain bounds. The real interesting parts are where I call bounds.extend(position) and the fitAllBounds function.

var map, bounds;

function initialize() {

  var southWest = new google.maps.LatLng(40, -70);
  var northEast = new google.maps.LatLng(35, -80);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();

  var center = new google.maps.LatLng(40, -70);

  map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Add center marker
  new google.maps.Marker({
    position: center,
    label: 'C',
    map: map
  });

  // Create the bounds object
  bounds = new google.maps.LatLngBounds();

  // Create random markers
  for (var i = 0; i < 20; i++) {

    // Calculate a random position
    var position = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());

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

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        map.setZoom(5);
        map.setCenter(marker.position);
      }
    })(marker, i));

    // Extend the bounds with the last marker position
    bounds.extend(position);
  }

  // Fit all bounds once, when the map is ready
  google.maps.event.addListenerOnce(map, 'idle', function() {

    fitAllBounds(bounds);
  });
}

function fitAllBounds(b) {

  // Get north east and south west markers bounds coordinates
  var ne = b.getNorthEast();
  var sw = b.getSouthWest();

	// Get the current map bounds
  var mapBounds = map.getBounds();

  // Check if map bounds contains both north east and south west points
  if (mapBounds.contains(ne) && mapBounds.contains(sw)) {

    // Everything fits
    return;

  } else {

    var mapZoom = map.getZoom();

    if (mapZoom > 0) {

      // Zoom out
      map.setZoom(mapZoom - 1);

      // Try again
      fitAllBounds(b);
    }
  }
}

initialize();

#map-canvas {
  height: 200px;
  width: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Here it is also on JSFiddle:

JSFiddle demo

这篇关于Google Maps API 3 - 在屏幕上显示所有标记，但保留Centerpoint的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！