如何使用按鈕onclick調整infowindow？ +更改infowindow的內容

Question

我已經嘗試了很多不同的方式來編寫此內容，但我真的不知道如何才能做到這一點。我是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); 
}; 

當我這樣做，控制檯寫道：意外的令牌;

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

此行是問題

Answer 1

這是一個真正的參與情況，而且會有更多的問題很快與變量範圍，一旦你解決這個迫在眉睫的問題。我會告訴你如何解決你的直接問題是關於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開發工具），您的「副」按鈕現在呈現如下形式

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

這是現在有效的語法。你的新的問題是onclick處理程序期望找到FBN.events.resizeWindow()。但這是一個不同的問題。:)

以下是我嘗試使用的一些更改：http://pastebin.com/Uczwct8H