Question

我正在使用Google地方自动填充功能。我有placeIds并使用google maps 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);

Answer 1

使您的map变量全局（就像您现有的边界对象一样）

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

proof of concept fiddle

代码段

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"></script>
<div id="map"></div>

Answer 2

创建一个空的LatLngBounds对象。

datetime

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

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

扩展边界以包含该位置。

var position = marker.getPosition();

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

bounds.extend(position);

自动调整谷歌使用地点ID映射多个标记

2 个答案: