Javascript 我如何调整信息窗口的大小和按钮点击它+；更改信息窗口的内容

我尝试了很多不同的方法来写这篇文章，但我真的不明白我怎么能做到。我是javascript新手，所以也许这对你来说很容易

当我点击地图上的标记时，我有一个信息框。我想在信息框中有“更多”按钮。当有人单击按钮时，信息框将调整大小并更改内容。如何使用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);
};

resizeWindow=函数（stringItem，isResized）{
var eventItem=JSON.parse（stringItem）；
processLocation（eventItem，isResized）；
};
processLocation=函数（eventItem，isResized）{
变量i、内容字符串、myOptions、ib、markerooptions、marker、infoWindowWidth；
log（“-->事件被搁置：“+eventItem.name”）；
var stringItem=JSON.stringify（eventItem）；
如果（！isResized）{
infoWindowWidth=“450px”；
内容字符串=
'' +
'' +
''+eventItem.name+''事件+
''+eventItem.company+''+eventItem.company\u地址+''+
“维西”+
'' +
'';
console.log（isResized）；
}否则{
infoWindowWidth=window.screen.availWidth+“px”；
内容字符串=
'' +
'' +
''+eventItem.name+''事件+
''+eventItem.company+''+eventItem.company\u地址+''+
“维西”+
'' +
'';
}
myOptions={
content:contentString，
disableAutoPan:错，
最大宽度：0，
pixelOffset：新的google.maps.Size（-140,4），
zIndex:null，
箱式：{
宽度：infoWindowWidth
},
closeBoxMargin：“6px”，
closeBoxURL:“https://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance:new google.maps.Size（1,1），
伊希登：错，
窗格：“浮动窗格”，
enableEventPropagation:false
};
ib=新信息框（myOptions）；
infoWindows.push（ib）；
标记选项={
位置：新的google.maps.LatLng（eventItem.latitude，eventItem.longitude），
地图：地图，
标题：eventItem.name，
图标：'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Marker-Outside-Azure.png'
}
marker=新的google.maps.marker（markerOptions）；
标记器。推（标记器）；
createListener（标记、映射、ib）；
};

当我这样做时，控制台会写下：意外的令牌

'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +

'Více'+

---

这一行是个问题

这是一个非常复杂的情况，一旦您解决了这个直接问题，变量作用域很快就会出现更多问题。我将向您展示如何解决与

意外令牌有关的直接问题

使用引号和JSON时，您会遇到困难。以您的代码为例：

'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>'

换句话说，您实际上是在编写这个动态HTML。请注意双引号：

<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>

您应该对
stringItem
more进行编码以删除所有引号。我让你的代码处理这个：

var stringItem = utf8_to_b64(JSON.stringify(eventItem));

其中我包括了这些有用的函数，它们的名称不言自明：

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

当我对您提供的站点进行修改（使用Chrome开发工具）时，您的“副”按钮现在呈现如下

<button onclick="FBN.events.resizeWindow('eyJuYW1lIj ... IjoiMyJ9', true)">Více</button>

Více

这现在是有效的语法。您的新问题是onclick处理程序希望在哪里找到
FBN.events.resizeWindow（）
。但这是另一个问题。：）

以下是我尝试过的一些更改：
这里什么是
stringItem
var eventItem=JSON.parse（stringItem）哦，是的，我粘贴了错误的代码，我会编辑好的，谢谢。现在，您能否提供一个示例，说明如何调用
resizeWindow（stringItem，isResized）
？stringItem是什么？我想在按钮上调用resizeWindow单击。。。stringItem将是eventItem的JSON（eventItem在basic中是我的内容），试图为您解决这个问题，但我们需要一个半工作的演示。您能在JSBin.com或JSFiddle.net中编写一些代码让我们看看吗？非常感谢您。。。我真的很感谢你的帮助和花在我问题上的时间。是的，现在我要专注于我的新问题。再次非常感谢：）我刚刚解决了这个问题。。。我需要像这样设置resizeWindow
my.resizeWindow=function（stringItem，isResized）
太棒了！顺便说一下，你的网站看起来很酷。祝你一切顺利。再次感谢你。。。现在它处于工作状态。。。这是我的学士论文
var stringItem = utf8_to_b64(JSON.stringify(eventItem));

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

<button onclick="FBN.events.resizeWindow('eyJuYW1lIj ... IjoiMyJ9', true)">Více</button>