Question

有人能帮助我吗？

我在Google Maps API中显示infoWindow时遇到问题 - 背景阴影显示不正确。阴影的透明度不起作用。

[你可以在网页上看到问题] [1]（点击圆圈中的红色圆点A来显示问题）

代码在这里：

var geocoder;
var map;
function initialize() {  
var pinkParksStyles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},
{
featureType: "landscape.man_made",
stylers: [
{ hue: "#ed1c26" },
{ saturation: 100 },
{ gamma: 0.2 }
]
}
];   

var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Architektonická mapa"});

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(49.830896,15.331421);


var myOptions = {
  zoom: 7,
  center: latlng,
  mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "pink_parks"]
  }
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var hvezdo = new google.maps.LatLng(49.872623,14.769359);

map.mapTypes.set("pink_parks", pinkMapType);
map.setMapTypeId("pink_parks");

var image = "http://www.cka2011.cz/archbook/wp-content/plugins/Ada_archmapa/icon-arch.png";

var hvezdo = new google.maps.LatLng(49.872623,14.769359);

  var marker = new google.maps.Marker({
  position: hvezdo,
  map: map,
  title:"matomas.cz",
  icon: image, 
});

var contentString = "<div id=content>"+
"<div id= siteNotice >"+
"</div>"+
"<h2 id= firstHeading  class= firstHeading >Uluru</h2>"+
"<div id= bodyContent >"+
"<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
"sandstone rock formation in the southern part of the "+
"Northern Territory, central Australia. It lies 335 km (208 mi) "+
"south west of the nearest large town, Alice Springs; 450 km "+
"(280 mi) by road. Kata Tjuta and Uluru are the two major "+
"features of the Uluru - Kata Tjuta National Park. Uluru is "+
"sacred to the Pitjantjatjara and Yankunytjatjara, the "+
"Aboriginal people of the area. It has many springs, waterholes, "+
"rock caves and ancient paintings. Uluru is listed as a World "+
"Heritage Site.</p>"+
"<p>Attribution: Uluru, <a href= http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194 >"+
"http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>"+
"</div>"+
"</div>";

var infobox = new google.maps.InfoWindow({
content: contentString
 });

google.maps.event.addListener(marker, "click", function() {

infobox.open(map,marker);
});
}

function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { "address": address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    map.setZoom(14);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
  });
  }

Answer 1

您的CSS干扰了地图：

.entry img, img.thumbnail {
    background-color: #FFFFFF;

您需要关闭地图图像的背景颜色：

#map_canvas img {
    background-color: transparent;
    }

（您的网页每秒也会出现datetime is undefined错误。）

Answer 2

您的样式表正在影响infowindow呈现。

此stylesheet的第285行：

.entry img, img.thumbnail { padding: 5px; background:#FFF; }

是级联并影响所有元素，包括infowindows。建议你使样式表更具体，这样它就不会影响所有子img元素。

在Google Maps API中无法正确显示infoWindow

2 个答案: