时间戳

首页 > 解决方案 > 谷歌地图 API 确定缩放级别？

javascript - 谷歌地图 API 确定缩放级别？

问题描述

我们已经获得了以下代码，以在打开地图时显示特定的 Google Maps API 信息窗口：

https://jsfiddle.net/e26qyzxm/

问题是缩放级别在代码中被硬编码为：

map.setZoom(16);

如图所示，使用示例标记时效果很好。

但是，我们需要动态设置缩放级别，因此当从后端加载真实世界的标记时，缩放级别设置为略高于标记超出其集群的级别（如果有）。否则，16 的缩放级别可能太低，并且 infoWindow 可能不会显示，因为特定标记仍在群集中。

谁能建议修改代码来做到这一点？

地图

HTML：

<div id="map"></div>
 <!-- Replace the value of the key parameter with your own API key. -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS：

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Javascript：

var MrkId = 62440;
var markersC = [];
var markersA = [];
var infowindow;
var map;
var markerCluster;

var points = [
  ['Point 1', 'adresse 1 ', 46.613317, 2.249830, 62437],
  ['Point 2', 'adresse 2 ', 46.713317, 2.249830, 62438],
  ['Point 3', 'adresse 3 ', 46.613317, 2.349830, 62439],
  ['Point 4', 'adresse 4 ', 46.713317, 2.449830, 62440],
  ['Point 5', 'adresse 5 ', 46.613317, 2.449830, 62441],
  ['Point 1', 'adresse 1 ', 46.413317, 2.249830, 62442],
  ['Point 2', 'adresse 2 ', 46.513317, 2.249830, 62443],
  ['Point 3', 'adresse 3 ', 46.513317, 2.349830, 62444],
  ['Point 4', 'adresse 4 ', 46.413317, 2.449830, 62445],
  ['Point 5', 'adresse 5 ', 46.513317, 2.449830, 62446],
];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 46.613317,
      lng: 2.349830
    },
    zoom: 9
  });

  infowindow = new google.maps.InfoWindow();
  setMarkers();
}

function MkrClick(Mrk, Cnt, point) {
  var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';

  Mrk.addListener('click', function() {
    infowindow.setContent(Cnt);
    infowindow.open(map, Mrk);

  });
}

function setMarkers() {
  console.log("setMarkers")
  for (var i = 0; i < points.length; i++) {
    var point = points[i];
    var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';

    var marker = new google.maps.Marker({
      position: {
        lat: point[2],
        lng: point[3]
      },
      map: map,
      title: point[0],
      loc_id: point[4],
      loc_txt: contentString,
    });
    markersA.push(marker);
    markersC.push(marker);
    MkrClick(marker, contentString, point);

    if (i == (points.length - 1)) {
      // Add a marker clusterer to manage the markers.
      markerCluster = new MarkerClusterer(map, markersC, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });
      if (MrkId != 0) {
        ShowInfo(MrkId)
        if (MrkId * 1 == point[4] * 1) {
          console.log("MrkId=" + MrkId);       
        }
      }
    }
  }
}

function ShowInfo(MrkIdSel) {

  var IdxFound = -1;
  for (var a = 0; a < markersC.length; a++) {

    var McLoc = markersC[a].loc_id;
    var McLocA = markersA[a].loc_id;

    if (McLoc == MrkIdSel) {
      IdxFound = a;

      a = (markersC.length - 1)

    }

    if (a == (markersC.length - 1)) {
      var bounds = new google.maps.LatLngBounds(markersC[IdxFound].position);
      map.fitBounds(bounds);
      setTimeout(function() {
        map.setZoom(16);
        google.maps.event.trigger(markersA[IdxFound], "click", {});
      }, 125);
    }
  }
}

function isMarkerClustered(Marker) {
  var clusters = markerCluster.clusters_;
  var Pos = 0;
  console.log("isMarkerClustered clusters.length=" + clusters.length)
  for (var i = 0; i < clusters.length; i++) {
    var Cmarkers = clusters[i].getMarkers();
    for (var m = 0; m < Cmarkers.length; m++) {
      if (Cmarkers[m] === Marker) {
        Pos = clusters[i].getCenter()
      }

      if (i == (clusters.length - 1)) {
        if (m == (Cmarkers.length - 1)) {

          if (Pos != 0) {
            Pos = Marker.position
          }

          var Info2 = new google.maps.InfoWindow({
            //position: markersC[a].position,
            position: Pos,
            content: Marker.loc_txt,
          }).open(map);
        }
      }
    }
  }
}

更新 1：

我想另一种方法是关闭集群并将缩放硬编码为 16。然后如果用户缩小，隐藏 infoWindow 并重新启用集群。如果有人可以建议修改代码来做到这一点，我将不胜感激。

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

执行加载后，有了标记的位置，您可以使用bounds.extend，map.fitBounds因此地图会自动缩放以显示后端返回的所有引脚，如下所示：

//markers is an array that contains the loaded result
var bounds = new google.maps.LatLngBounds();
for (var i = 0, marker; marker = markers[i]; i++) {
  //pass the location of each marker to bounds.extend
  bounds.extend(marker.geometry.location);
}
//tell your map to sets the viewport to contain all the markers.
map.fitBounds(bounds);

如果您只想按邮政编码加载区域，例如，使用地理编码器，您还可以使用map.fitBounds设置视口以显示地理编码器返回的整个特定区域，如下所示：

//response is the geocoder's response
map.fitBounds(response[0].geometry.viewport);

另一种解决方案可能是：

    var geoCoder = new GClientGeocoder();
    geoCoder.setViewport(map.getBounds());
    geoCoder.getLocations('searchquery', function(latlng) {
      if( latlng.Placemark.length > 0 ) {
        var box = latlng.Placemark[0].ExtendedData.LatLonBox;
        var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));
        var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);
        var zoom = oMap.getBoundsZoomLevel(bounds);
        map.setCenter(center, zoom);
      }
    })

推荐阅读