Google Maps API - ControlPosition with Infowindow
Google Maps API - ControlPosition with Infowindow
是否可以使用类似于maps.controls[google.maps.ControlPosition.TOP_CENTER].push(infoWindow)的东西在地图的顶部中心显示控制窗口？
我有一张带有多边形的地图来启用鼠标悬停事件。我也试图将 polgyon 弹出窗口的信息窗口放在地图的顶部中心并在鼠标退出时消失（我希望避免使用 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;
});
}
如果你想在地图上而不是信息窗口上创建一个控件，你可以这样做（你也可以把内容放在地图之外的页面上的其他固定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>多边形不能作为 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>相关文章：
- Fighting with FRP
- issue with FB.Event.subscribe
- geolocation-marker.js conflict with markerclusterer.js
- Angular 2.0 with JavaScript or TypeScript?
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- WebComponentsJS with IE10
- 指令的模板必须只有一个根元素:With restrict E&替换true
- 边栏按钮和infoWindow是否可能有不同的内容
- timeago.js with datatable and PHP
- Ajax and Json with Rails
- errors with Javascript try catch
- how to split a string with ','
- Understanding Javascript scope with "var that = this&qu
- Architecture for CPU intensive tasks with NodeJS & Socke
- How to declare a Map containing certain properties with flow
- 设置'这'在React with Inverse Data Flow中
- Unit-testing multiple use cases with Karma & Mocha.js
- Modify Javascript with C#
- 谷歌地图API v3:Initial View is Fine，but Gray Box with No Map if
- Google Maps API - ControlPosition with Infowindow
