自动调整谷歌使用位置id映射多个标记 - Autofit google maps multiple markers using place id

我正在使用谷歌位置自动完成。我有placeId，并成功显示它使用谷歌地图API。但并不是所有的标记都可见。我必须放大它才能看到所有的标记。用缩放调整地图后，我可以看到所有的标记。如何自动调整屏幕上的所有标记？

我的代码：

var placeid_json = <?php echo $placeids; ?>;
var openedInfoWindow = null;
 var bounds = new google.maps.LatLngBounds();
function initialize() {
    var latitude = 21.1202644,
        longitude = 79.0418986,
        radius = 8000,
    center = new google.maps.LatLng(latitude, longitude),
    mapOptions = {
        center: center,
        zoom: 10,
        scrollwheel: false
    };
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

   setMarkers(center, radius, map);
}
function setMarkers(center, radius, map) {
var json = placeid_json;
for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i];
    createMarker(data, map);
    }
}
function createMarker(data, map) {
            var service = new google.maps.places.PlacesService(map);
        service.getDetails({
            placeId: data.placeid
        }, function (result, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            var marker = new google.maps.Marker({
                map: map,
                place: {
                    placeId: data.placeid,
                    location: result.geometry.location
                }
                //position: result.geometry.location
            });
            infoBox(map, marker, data, result);
        });
}
function infoBox(map, marker, data, result) {
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, "click", function (e) {
        infoWindow.setContent(data.content);
        infoWindow.open(map, marker);
    });
    (function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {
        infoWindow.setContent(data.content+"<br>"+result.name);
        infoWindow.open(map, marker);
    });
})(marker, data);
}

google.maps.event.addDomListener(window, 'load', initialize);

将map变量设置为全局变量（就像现有的bound对象一样）

var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;
function initialize() {
  var latitude = 21.1202644, longitude = 79.0418986, radius = 8000,
  center = new google.maps.LatLng(latitude, longitude), mapOptions = {
    center: center,
    zoom: 10,
    scrollwheel: false
  };
  // initialize the global map variable
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

扩展边界并在细节服务的回调函数内调用map.fitBounds

function createMarker(data, map) {
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: data.placeid
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: data.placeid,
        location: result.geometry.location
      }
      //position: result.geometry.location
    });
    bounds.extend(result.geometry.location);
    map.fitBounds(bounds);
    infoBox(map, marker, data, result);
  });
}

概念验证小提琴

代码片段：

var placeid_json = [{
  "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
  "content": "   1   "
}, {
  "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
  "content": "   2   "
}, {
  "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
  "content": "   3   "
}];
var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;
function initialize() {
  var latitude = 21.1202644,
    longitude = 79.0418986,
    radius = 8000,
    center = new google.maps.LatLng(latitude, longitude),
    mapOptions = {
      center: center,
      zoom: 10,
      scrollwheel: false
    };
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  setMarkers(center, radius, map);
}
function setMarkers(center, radius, map) {
  var json = placeid_json;
  for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i];
    createMarker(data, map);
  }
}
function createMarker(data, map) {
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: data.placeid
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: data.placeid,
        location: result.geometry.location
      }
    });
    bounds.extend(result.geometry.location);
    map.fitBounds(bounds);
    infoBox(map, marker, data, result);
  });
}
function infoBox(map, marker, data, result) {
  var infoWindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, "click", function(e) {
    infoWindow.setContent(data.content);
    infoWindow.open(map, marker);
  });
  (function(marker, data) {
    google.maps.event.addListener(marker, "click", function(e) {
      infoWindow.setContent(data.content + "<br>" + result.name);
      infoWindow.open(map, marker);
    });
  })(marker, data);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

创建一个空的LatLngBounds对象。

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

对于每个标记，获取其位置。

var position = marker.getPosition();

扩展边界以包括该位置。

bounds.extend(position);

对所有标记执行此操作后，使贴图适合这些边界。

map.fitBounds(bounds);