![](/img/trans.png)
[英]Typo3 6.1.7: How to load Javascript-file in own extension in the left backend-iframe?
[英]How to display a picture using Fluid (ViewHelper) from a JavaScript-file in TYPO3
我使用 leaflet 为交互式 map 创建了自己的扩展。 但我无法显示 map 的图片:
setup.typoscript :
tt_content {
interaktivekarte_karteuser =< lib.contentElement
interaktivekarte_karteuser {
templateName = Map
dataProcessing {
40 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
40 {
references.fieldName = tx_interaktiveKarte_image
as = image
}
}
}
}
Map.html :
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="content">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<div class="tx-interaktive-karte">
<div id="map">
</div>
</div>
</f:section>
</html>
park.js :
var map = L.map('map', {crs: L.CRS.Simple});
var bounds = [[0,0], [750,1200]];
L.imageOverlay('../Parks/Park.png', bounds).addTo(map);
map.fitBounds(bounds);
为了检查我在 Map.html 中写了这个流体:
<f:for each="{image}" as="fileReference">
<f:image class="img-fluid" image="{fileReference}"/>
</f:for>
如果我把上面的流体写在 Map.html 中,就会显示一张图片。 但在 leaflet 之外。 我想在leaflet中显示图片...
如何在 HTML 和 JavaScript 文件中编写以在 leaflet 中显示图片?
(在任何情况下我都必须使用流体吗?图片数据在我的扩展中。我可以在 javascript 文件中呈现它吗?)
谢谢您的帮助。
关于什么?
HTML:
<div id="map" data-image="{image.0.publicUrl}">
</div>
JS:
var map = L.map('map', {crs: L.CRS.Simple});
var bounds = [[0,0], [750,1200]];
var imageUrl = $('#map').data('image');
L.imageOverlay(imageUrl, bounds).addTo(map);
map.fitBounds(bounds);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.