Google maps api 3 在infobox.open上的google maps infobox中显示动态背景图像
我正在尝试将背景图像添加到谷歌地图信息框内容中的div中。我遇到了问题,因为我用来更改.css('background-image')的函数无法识别div的ID。这可能是因为在打开infobox时内容字符串尚未加载DOM。我知道我必须添加一个收听“domready”或类似内容的事件,但我不确定如何实现它。下面是有问题的代码:Google maps api 3 在infobox.open上的google maps infobox中显示动态背景图像,google-maps-api-3,domready,infobox,Google Maps Api 3,Domready,Infobox,我正在尝试将背景图像添加到谷歌地图信息框内容中的div中。我遇到了问题,因为我用来更改.css('background-image')的函数无法识别div的ID。这可能是因为在打开infobox时内容字符串尚未加载DOM。我知道我必须添加一个收听“domready”或类似内容的事件,但我不确定如何实现它。下面是有问题的代码: var boxContent = var boxContent = "<div id=box><div id=leftside><img id
var boxContent = var boxContent = "<div id=box><div id=leftside><img id=logo src=" +
logopath + " /><h1>" + number + "<br />" + street +
"<br />" + city + "</h1><h2>" + phone +
"<br /><a target=_blank href=" + website +
">visit website</a></h2></div><div id=menu>" +
"<button id=photo onClick=buttonState(this.id)><img src=infomenu/photoicon.png></button></button>" +
"<button id=comments onClick=buttonState(this.id)><img src=infomenu/commentsicon.png></button>" +
"<button id=games onClick=buttonState(this.id)><img src=infomenu/gamesicon.png></button>" +
"<button id=ed onClick=buttonState(this.id)><img src=infomenu/edicon.png></button>" +
"<button id=stay onClick=buttonState(this.id)><img src=infomenu/stayicon.png></button>" +
"<button id=fly onClick=buttonState(this.id)><img src=infomenu/flyicon.png></button>" +
"<div id=display></div>"
var myOptions = {
content: boxContent,
disableAutoPan: false,
pixelOffset: new google.maps.Size(-400, -173),
closeBoxMargin: "-12px -12px 0px 0px",
closeBoxURL: "close.png",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function(e) {
map.setZoom(13);
map.setCenter(this.getPosition());
ib.open(map, this, displayphotos(imagepath);
});
function displayphotos(imagepath){
$('#display').css('background-image', 'url(' + imagepath + '1.png)');
}
var-boxContent=var-boxContent=“+number+”
“+street+
“
”+城市+“+电话+
“
”+
"" +
"" +
"" +
"" +
"" +
"" +
""
变量myOptions={
内容:boxContent,
disableAutoPan:错,
pixelOffset:new google.maps.Size(-400,-173),
closeBoxMargin:“-12px-12px 0px 0px”,
closeBoxURL:“close.png”,
infoBoxClearance:new google.maps.Size(1,1),
窗格:“浮动窗格”,
enableEventPropagation:false
};
var ib=新信息框(myOptions);
google.maps.event.addListener(标记,'click',函数(e){
map.setZoom(13);
map.setCenter(this.getPosition());
ib.open(地图、此、显示照片(imagepath);
});
功能显示照片(图像路径){
$('#display').css('background-image','url('+imagepath+'1.png');
}
InfoBox.open
只接受两个参数—map和anchor。您需要分别设置该属性。我发现,保留对boxContent
DOM元素的引用可以让您的生活更轻松
var boxContent = $("<div id='display'></div>");
var myOptions = {
content: boxContent[0],
disableAutoPan: false,
pixelOffset: new google.maps.Size(-400, -173),
closeBoxMargin: "-12px -12px 0px 0px",
closeBoxURL: "http://www.carltonhotelblanchardstown.com/files/images/a/calendar-popup-close.png",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false
};
var-boxContent=$(“”);
变量myOptions={
内容:boxContent[0],
disableAutoPan:错,
pixelOffset:new google.maps.Size(-400,-173),
closeBoxMargin:“-12px-12px 0px 0px”,
closeBoxURL:“http://www.carltonhotelblanchardstown.com/files/images/a/calendar-popup-close.png",
infoBoxClearance:new google.maps.Size(1,1),
窗格:“浮动窗格”,
enableEventPropagation:false
};
谢谢Jeff。我已经编辑了我的原始问题。我的boxContent变量的信息比一个DIV多得多,因此当信息框打开时,我将无法更改boxContent的样式。我试图保持我的帖子的简单性,因为我认为我的思路是正确的,需要一个“domready”侦听器。我想不是。有什么建议吗?那就是很好,只需像这样使用
jQuery.find()
:boxContent.find('#display').css(/*…*/);