文章/答案/技术大牛

发布

社区首页 >问答首页 >Google带Infowindow的ControlPosition

问Google带Infowindow的ControlPosition
EN

Stack Overflow用户

提问于 2015-01-28 21:17:51

回答 2查看 752关注 0票数 0

是否可以使用类似于maps.controls[google.maps.ControlPosition.TOP_CENTER].push(infoWindow)的东西在地图的顶部中心显示一个控制窗口？

我有一个地图与多边形，以启用鼠标事件。我还试图让polgyon弹出的信息出现在地图的顶部中心，然后消失在鼠标上(我希望避免使用CSS，因为我希望这是尽可能纯粹的Google，但我知道有时这是不可能的)。

多边形是伟大的，但Infowindow继续显示在屏幕的左上角。任何帮助都将不胜感激！谢谢!

当前，当我试图鼠标控制：“未定义的TypeError:无法读取未定义的”的属性'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;
    });
  }

google-maps-api-3

javascript

google-maps

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-29 04:26:21

如果您想要在地图上而不是在in上创建一个控件，您可以这样做(您还可以将内容放在地图之外的页面上的其他固定div中)：

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

工作代码片段：

var map;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(40, -117),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var arr = new Array();
  var polygons = [];
  var bounds = new google.maps.LatLngBounds();

  // downloadUrl("subdivision-coordinates.php", function(data) {
  var xml = xmlParse(xmlString);
  var subdivision = xml.getElementsByTagName("subdivision");
  // alert(subdivision.length);
  for (var i = 0; i < subdivision.length; i++) {
    arr = [];
    var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
    for (var j = 0; j < coordinates.length; j++) {
      arr.push(new google.maps.LatLng(
        parseFloat(coordinates[j].getAttribute("lat")),
        parseFloat(coordinates[j].getAttribute("lng"))
      ));

      bounds.extend(arr[arr.length - 1])
    }
    polygons.push(new google.maps.Polygon({
      paths: arr,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.1
    }));
    polygons[polygons.length - 1].setMap(map);
    createPolygon(polygons[polygons.length - 1], "", "polygon " + polygons.length);
  }
  // });
  map.fitBounds(bounds);
}

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

var xmlString = '<subdivisions><subdivision name="Auburn Hills"><coord lat="39.00748" lng="-92.323222"/><coord lat="39.000843" lng="-92.323523"/><coord lat="39.000509" lng="-92.311592"/><coord lat="39.007513" lng="-92.311378"/><coord lat="39.00748" lng="-92.323222"/></subdivision><subdivision name="Vanderveen"><coord lat="38.994206" lng="-92.350645"/><coord lat="38.985033" lng="-92.351074"/><coord lat="38.984699" lng="-92.343092"/><coord lat="38.981163" lng="-92.342234"/><coord lat="38.984663" lng="-92.3335"/><coord lat="38.993472" lng="-92.333179"/><coord lat="38.994206" lng="-92.350645"/></subdivision><subdivisions>';

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

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

#map-canvas,
body,
html {
  height: 100%;
  width: 100%;
}
#infotop {
  text-align: center;
  height: 50px;
  /*n usado*/
}
#infocontent {
  margin: 30px;
  text-align: justify;
  height: 84%;
}
.caixabranca {
    border:solid 1px #cccccc;
    background-color:#FFFFFF;
    font-size:11px;
    font-family:verdana,"sans-serif";
    color:#000;
    padding:5px;
    }

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>

票数 1

Stack Overflow用户

发布于 2015-01-28 21:28:27

多边形作为InfoWindow.open的第二个参数是无效的(目前唯一可以使用的是google.maps.Marker)。

若要使用InfoWindow，请设置位置(使用.setPosition(latLng))

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

工作代码片段：

var map;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(40, -117),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var arr = new Array();
  var polygons = [];
  var bounds = new google.maps.LatLngBounds();

  // downloadUrl("subdivision-coordinates.php", function(data) {
  var xml = xmlParse(xmlString);
  var subdivision = xml.getElementsByTagName("subdivision");
  // alert(subdivision.length);
  for (var i = 0; i < subdivision.length; i++) {
    arr = [];
    var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
    for (var j = 0; j < coordinates.length; j++) {
      arr.push(new google.maps.LatLng(
        parseFloat(coordinates[j].getAttribute("lat")),
        parseFloat(coordinates[j].getAttribute("lng"))
      ));

      bounds.extend(arr[arr.length - 1])
    }
    polygons.push(new google.maps.Polygon({
      paths: arr,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.1
    }));
    polygons[polygons.length - 1].setMap(map);
    createPolygon(polygons[polygons.length - 1], "", "polygon " + polygons.length);
  }
  // });
  map.fitBounds(bounds);
}

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

var xmlString = '<subdivisions><subdivision name="Auburn Hills"><coord lat="39.00748" lng="-92.323222"/><coord lat="39.000843" lng="-92.323523"/><coord lat="39.000509" lng="-92.311592"/><coord lat="39.007513" lng="-92.311378"/><coord lat="39.00748" lng="-92.323222"/></subdivision><subdivision name="Vanderveen"><coord lat="38.994206" lng="-92.350645"/><coord lat="38.985033" lng="-92.351074"/><coord lat="38.984699" lng="-92.343092"/><coord lat="38.981163" lng="-92.342234"/><coord lat="38.984663" lng="-92.3335"/><coord lat="38.993472" lng="-92.333179"/><coord lat="38.994206" lng="-92.350645"/></subdivision><subdivisions>';

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

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

#map-canvas,
body,
html {
  height: 100%;
  width: 100%;
}

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map-canvas"></div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28202562

复制

相似问题

问Google带Infowindow的ControlPosition
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google带Infowindow的ControlPositionEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google带Infowindow的ControlPosition
EN