如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容

How can I resize infowindow with button onclick in it? + Change content of infowindow

本文关键字：窗口 信息窗 信息 按钮 何调整 调整      更新时间：2023-09-26

我尝试了很多不同的方法来写这篇文章，但我真的不明白该怎么做。我是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);
};

当我这样做时，控制台会给我写：Unexpected token；

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

这行是的问题

这是一个真正涉及的情况，一旦解决了这个直接的问题，变量作用域很快就会出现更多问题。我将向您展示如何解决有关Unexpected token ;的即时问题。

您在引号和JSON方面遇到了困难。以您的代码为例：

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

您的stringItem不再只是一个变量，而是其内容将在上面内联。如果它有任何未带转义的单引号或双引号，则会导致错误。

以下是我回收的stringItem样品：

{"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}

换句话说，您实际上是在编写这个动态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>

首先，您需要用单引号将这个文本字符串括起来。所以我们需要这个：

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

这是足够的信息，你可以解决你的问题，但更进一步，而不是

var stringItem = JSON.stringify(eventItem);

您应该编码stringItem更多以删除所有引号。我得到了你的代码工作与此：

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开发工具），你的"Vice"按钮现在呈现为这样的

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

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

以下是我尝试过的一些变化：http://pastebin.com/Uczwct8H

相关文章：