谷歌地圖API確定縮放級別？-有解無憂

我們提供了以下代碼來在地圖打開時顯示特定的 Google Maps API infoWindow：

谷歌地圖API確定縮放級別？

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 >'   '<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 >'   '<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 并重新啟用聚類。如果有人可以建議修改代碼來做到這一點，我將不勝感激。

uj5u.com熱心網友回復：

執行加載后，您可以使用標記的位置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);
      }
    })

uj5u.com熱心網友回復：

我會使用以下 js 代碼https://jsfiddle.net/r15h2jy7/1/

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'), {

//vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
  minZoom: 0,
  maxZoom: 1,
      restriction: {
    latLngBounds: {
      north: 46.713317,
      south: 46.413317,
      east: 2.449830,
      west: 2.249830,
    },
  },
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
  });

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

function MkrClick(Mrk, Cnt, point) {
  var contentString = '<div >'   '<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 >'   '<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);
        }
      }
    }
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363062.html

標籤：javascript 谷歌地图 google-maps-api-3

上一篇：無法洗掉Vue3谷歌地圖示記

下一篇：無法在鍵值存盤中設定未定義的屬性