[英]How can I resize infowindow with button onclick in it? + Change content of infowindow
I have tried a lot of different ways to write this, but I really dont understand how I can do it. 我尝试了许多不同的方式来编写此代码,但是我真的不明白如何做到这一点。 I am new in javascript, so maybe it will be easy to do for you.
我是javascript的新手,所以也许对您来说很容易。
I have infobox when I click on marker on map. 单击地图上的标记时,我有信息框。 I want to have "more" button in that infobox.
我想要该信息框中的“更多”按钮。 When someone clicks on the button, the infobox will resize and change content.
当有人单击按钮时,信息框将调整大小并更改内容。 How can I write it, using javascript and HTML?
如何使用javascript和HTML编写它?
resizeWindow = function (stringItem, isResized) {
var eventItem = JSON.parse(stringItem);
processLocation(eventItem, isResized);
};
processLocation = function (eventItem, isResized) {
var i, contentString, myOptions, ib, markerOptions, marker, infoWindowWidth;
console.log("---> event is stoned: " + eventItem.name);
var stringItem = JSON.stringify(eventItem);
if (!isResized) {
infoWindowWidth = "450px";
contentString =
'<div class="eventitem-content">' +
'<div class="eventitem-bodycontent">' +
'<div class="eventitem-title">' + eventItem.name + '</div><img src="/Content/LandfillPhotos/' + eventItem.photo_number + '.png" alt="Landfill" style="width:425px;height:335px"/>' +
'<div class="eventitem-company">' + eventItem.company + '</div><div class="eventitem-address">' + eventItem.company_address + '</div>' +
'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +
'</div>' +
'</div>';
console.log(isResized);
} else {
infoWindowWidth = window.screen.availWidth + "px";
contentString =
'<div class="eventitem-content">' +
'<div class="eventitem-bodycontent">' +
'<div class="eventitem-title">' + eventItem.name + '</div><img src="/Content/LandfillPhotos/' + eventItem.photo_number + '.png" alt="Landfill" style="width:425px;height:335px"/>' +
'<div class="eventitem-company">' + eventItem.company + '</div><div class="eventitem-address">' + eventItem.company_address + '</div>' +
'<button onclick="FBN.events.resizeWindow(' + stringItem + ', false)">Více</button>' +
'</div>' +
'</div>';
}
myOptions = {
content: contentString,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 4),
zIndex: null,
boxStyle: {
width: infoWindowWidth
},
closeBoxMargin: "6px",
closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
ib = new InfoBox(myOptions);
infoWindows.push(ib);
markerOptions = {
position: new google.maps.LatLng(eventItem.latitude, eventItem.longitude),
map: map,
title: eventItem.name,
icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Marker-Outside-Azure.png'
}
marker = new google.maps.Marker(markerOptions);
markers.push(marker);
createListener(marker, map, ib);
};
When I do it like this, console writes me: Unexpected token ; 当我这样做时,控制台会写信给我:Unexpected token;
'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +
This line is problem 这条线是问题
This is a really involved situation, and there will be more issues soon with variable scoping once you solve this immediate problem. 这是一个非常复杂的情况,一旦解决了这一紧迫的问题,可变范围就会很快出现更多问题。 I will show you how to solve your immediate problem which is regarding the
Unexpected token ;
我将向您展示如何解决与
Unexpected token ;
有关的眼前问题Unexpected token ;
. 。
You are in a difficult spot with quotes and JSON. 使用引号和JSON处在一个困难的地方。 Take your code for example:
以您的代码为例:
'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>'
Your stringItem
is no longer just a variable, but its contents will be inlined above. 您的
stringItem
不再仅仅是一个变量,而是其内容将在上面内联。 If it has any unescaped single or double quotes, it will cause an error. 如果它有任何未转义的单引号或双引号,则将导致错误。
Here is a sample stringItem
I recovered: 这是我恢复的示例
stringItem
:
{"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}
In other words, you are essentially writing this dynamic HTML. 换句话说,您实际上是在编写此动态HTML。 Notice the double quotes:
注意双引号:
<button onclick="FBN.events.resizeWindow({"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}, true)">Více</button>
First, you need to surround this literal string with single quotes. 首先,您需要用单引号将该文字字符串引起来。 So we need this:
所以我们需要这个:
'<button onclick="FBN.events.resizeWindow(\''+ stringItem + '\', true)">Více</button>'
This is enough information for you to solve your problem, but to go a step further, instead of 这足以为您解决问题提供足够的信息,但是您可以走得更远而不是
var stringItem = JSON.stringify(eventItem);
you should encode stringItem
more to remove all quotes. 您应该对
stringItem
更多编码以删除所有引号。 I got your code working with this: 我让您的代码与此一起工作:
var stringItem = utf8_to_b64(JSON.stringify(eventItem));
where I included these useful functions whose names are self-explanatory: 在其中包括了这些有用的函数,其名称不言而喻:
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
function b64_to_utf8( str ) {
return decodeURIComponent(escape(window.atob( str )));
}
When I made the modifications to the site you supplied (using Chrome Dev tools), your "Vice" buttons now render like this 当我(使用Chrome Dev工具)对您提供的网站进行修改后,“ Vice”按钮现在呈现为
<button onclick="FBN.events.resizeWindow('eyJuYW1lIj ... IjoiMyJ9', true)">Více</button>
which is now valid syntax. 现在是有效的语法。 Your new problem is where the onclick handler expects to find
FBN.events.resizeWindow()
. 您的新问题是onclick处理程序希望在其中找到
FBN.events.resizeWindow()
。 But that's for a different question. 但这是一个不同的问题。 :)
:)
Here are some of the changes I experimented with: http://pastebin.com/Uczwct8H 这是我尝试过的一些更改: http : //pastebin.com/Uczwct8H
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.