Javascript 谷歌地图API-带信息窗口的ControlPosition

是否可以使用类似于

maps.controls[google.maps.ControlPosition.TOP\u CENTER].push（infoWindow）

的控件在地图的顶部中心显示控件窗口

我有一个带有多边形的地图来启用鼠标悬停事件。我还试图将polgyon弹出窗口的信息窗口放在地图的顶部中间，然后消失在mouseout上（我希望避免使用CSS，因为我希望这是尽可能纯的Google API，但我知道有时这是不可能的）

多边形很棒，但信息窗口一直显示在屏幕的左上角。任何帮助都将不胜感激！谢谢大家!

当前我尝试鼠标悬停时收到此错误消息： “未捕获类型错误：无法读取未定义的属性'zIndex'”

用于创建多边形和添加侦听器的零件的JS：

function createPolygon(city, url, name){
var infoWindow  = new google.maps.InfoWindow();
    google.maps.event.addListener(city, 'mouseover', function() {

      this.setOptions(
        {
          fillOpacity: 0.4,
        }
      );

      infoWindow.setContent(name);
      console.log(infoWindow);
      console.log("City: " + city + " URL: " + url + " Name: " + name);
      infoWindow.open(map, this);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoWindow);

      console.log("awww yis");
    });

    google.maps.event.addListener(city, 'mouseout', function() {
      this.setOptions(
        {
          fillOpacity: 0.1,
        }
      );
      infoWindow.close();
      console.log("awww no");
    });

    google.maps.event.addListener(city, 'click', function(){
      console.log("aaaawww yis");
      window.location = url;
    });
  }

---

多边形作为的第二个参数无效（目前唯一可用的是A）

要使用信息窗口，请设置位置（使用.setPosition（latLng））

---

如果您想在地图上而不是在信息窗口上创建控件，您可以这样做（也可以将内容放在地图之外页面上的其他固定div中）：

---

好的，我想我只需要为每个城市创建一个包含latLng的列，并在鼠标上方调用它来放置信息窗口。谢谢你把这件事弄清楚！*“英雄来了”开始在后台播放，谢谢！工作得很好。我不知道如何正确地使用map.controls，这让它变得非常清晰！

function createPolygon(city, url, name){
  var infoWindow  = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  for (var i=0; i<city.getPath().getLength(); i++) {
    bounds.extend(city.getPath().getAt(i));
  }
  var center = bounds.getCenter(); 
  google.maps.event.addListener(city, 'mouseover', function() {
    this.setOptions(
      {
        fillOpacity: 0.4,
      }
    );

    infoWindow.setContent(name);
    infoWindow.setPosition(center);
    console.log(infoWindow);
    console.log("City: " + city + " URL: " + url + " Name: " + name);
    infoWindow.open(map);
    console.log("awww yis");
  });

  google.maps.event.addListener(city, 'mouseout', function() {
    this.setOptions(
      {
        fillOpacity: 0.1,
      }
    );
    infoWindow.close();
    console.log("awww no");
  });

  google.maps.event.addListener(city, 'click', function(){
    console.log("aaaawww yis");
    window.location = url;
  });
}

function createPolygon(city, url, name) {
  var infoWindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < city.getPath().getLength(); i++) {
    bounds.extend(city.getPath().getAt(i));
  }
  var center = bounds.getCenter();
  google.maps.event.addListener(city, 'mouseover', function() {
    this.setOptions({
      fillOpacity: 0.4,
    });
    var textonome = document.createElement('DIV');
    textonome.className = "caixabranca";
    textonome.innerHTML = "<big><big><b><center>" + name + "</center></big></big></b><br>" + url;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(textonome);

    console.log("City: " + city + " URL: " + url + " Name: " + name);
    console.log("awww yis");
  });

  google.maps.event.addListener(city, 'mouseout', function() {
    this.setOptions({
      fillOpacity: 0.1,
    });
    map.controls[google.maps.ControlPosition.TOP_CENTER].clear();
    console.log("awww no");
  });

  google.maps.event.addListener(city, 'click', function() {
    console.log("aaaawww yis");
    window.location = url;
  });
}