缩放 +- 按钮上方的 Google 地图信息窗口弹出窗口？答案

【问题标题】：Google Maps Infowindow popup above Zoom +- buttons?缩放 +- 按钮上方的 Google 地图信息窗口弹出窗口？
【发布时间】：2021-01-01 21:25:23
【问题描述】：

在https://jsfiddle.net/2tcubr9a/ 中，如何使信息窗口显示在+ - 缩放按钮的顶部而不是它们的下方？

我试过了：

infowindow.setZIndex(99999);

但这并没有什么不同。

截图：

JavaScript：

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

var points = [
    ['Point 1', 'adresse 1 ', 46.613317, 2.249830],
    ['Point 2', 'adresse 2 ', 46.713317, 2.249830],
    ['Point 3', 'adresse 3 ', 46.613317, 2.349830],
    ['Point 4', 'adresse 4 ', 46.713317, 2.449830],
    ['Point 5', 'adresse 5 ', 46.613317, 2.449830],
    ['Point 1', 'adresse 1 ', 46.413317, 2.249830],
    ['Point 2', 'adresse 2 ', 46.513317, 2.249830],
    ['Point 3', 'adresse 3 ', 46.513317, 2.349830],
    ['Point 4', 'adresse 4 ', 46.413317, 2.449830],
    ['Point 5', 'adresse 5 ', 46.513317, 2.449830],
];
var markersC = [];
function setMarkers(map) {
 var infowindow = new google.maps.InfoWindow();
    for (var i = 0; i < points.length; i++) {
        var point = points[i];
        var marker = new google.maps.Marker({
                                                position: {lat: point[2], lng: point[3]},
                                                map: map,
                                                title: point[0],
                                            });
markersC.push(marker);
        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>';


        google.maps.event.addListener(marker, 'click', (function(marker, i, contentString) {
            return function() {
                infowindow.setContent(contentString);
        infowindow.setZIndex(99999);
                infowindow.open(map, marker);
            }
        })(marker, i, contentString));
    }
  
  // Add a marker clusterer to manage the markers.
 var markerCluster = new MarkerClusterer(map, markersC,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}

CSS：

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;

还有 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>

如果有人以前这样做过或者可以编辑 JSFiddle 以使信息窗口弹出出现在缩放按钮上，那将不胜感激。

【问题讨论】：

您可能需要为地图制作自定义控件并将它们添加到位于floatPane 下的map pane。
@geocodezip 谢谢。我认为这样的按钮仍然能够以绝对位置（例如右：50px；底部：80px；）漂浮在地图内容上（除了弹出信息窗口）？
您可以让他们这样做（尽管地图窗格的选择有限）

标签： javascript css google-maps google-maps-api-3

【解决方案1】：

这个 jsfiddle 为信息窗口创建了一个自定义 div：

http://jsfiddle.net/b170s71d/3/

var geocoder;
var map;
var overlay;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    map: map,
    draggable: true,
    position: map.getCenter()
  });

  google.maps.event.addListener(map, 'projection_changed', function() {
    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);

    var info = document.getElementById('myinfo');
    google.maps.event.addListener(marker, 'click', function(e) {
      var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng);
      var point2 = overlay.getProjection().fromLatLngToContainerPixel(e.latLng);
      document.getElementById('info').innerHTML = "click:" + e.latLng.toUrlValue(6) + "<br>pointD:" + point.x + "," + point.y + "<br>pointC" + point2.x + "," + point2.y;
      info.style.left = (point2.x - 100) + 'px';
      info.style.top = (point2.y - 60) + 'px';
      info.style.display = 'block';
    });
    google.maps.event.addListener(map, 'center_changed', function(e) {
      var point = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
      var point2 = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
      document.getElementById('info').innerHTML = "marker:" + marker.getPosition().toUrlValue(6) + "<br>pointD:" + point.x + "," + point.y + "<br>pointC" + point2.x + "," + point2.y;
      info.style.left = (point2.x - 100) + 'px';
      info.style.top = (point2.y - 60) + 'px';
      info.style.display = 'block';
    });
    google.maps.event.addListener(marker, 'drag', function(e) {
      var point = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
      var point2 = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());
      document.getElementById('info').innerHTML = "marker:" + marker.getPosition().toUrlValue(6) + "<br>pointD:" + point.x + "," + point.y + "<br>pointC" + point2.x + "," + point2.y;
      info.style.left = (point2.x - 100) + 'px';
      info.style.top = (point2.y - 60) + 'px';
      info.style.display = 'block';
    });

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

【讨论】：