[英]How can I resize infowindow with button onclick in it? + Change content of infowindow
我嘗試了許多不同的方式來編寫此代碼,但是我真的不明白如何做到這一點。 我是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 ;
有關的眼前問題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 Dev工具)對您提供的網站進行修改后,“ Vice”按鈕現在呈現為
<button onclick="FBN.events.resizeWindow('eyJuYW1lIj ... IjoiMyJ9', true)">Více</button>
現在是有效的語法。 您的新問題是onclick處理程序希望在其中找到FBN.events.resizeWindow()
。 但這是一個不同的問題。 :)
這是我嘗試過的一些更改: http : //pastebin.com/Uczwct8H
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.