我正在添加一个专为joomla K2模块设计的地图系统。 Joomla系统当前使用以下代码输出每个项目的信息。
<ul>
<?php foreach ($item2->extra_fields as $key=>$extraField): ?>
<?php if($extraField->value != ''): ?>
<li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
<?php if($extraField->type == 'header'): ?>
<h4 class="itemExtraFieldsHeader"><?php echo $extraField->name; ?></h4>
<?php else: ?>
<span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
<span class="itemExtraFieldsValue"><?php echo $extraField->value; ?></span>
<?php endif; ?>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
输出如下所示:
现在在一个名为default.php的文件中,我输入以下代码来显示地图。现在这样做了,我需要它在地图中创建一个弹出窗口,显示每个项目/人的信息。我计划使用前面提到的PHP代码执行此操作。下面是一个示例http://visuarch.net/map/dovecot-map.html
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script>
function init() {
var mapMinZoom = 3;
var mapMaxZoom = 8;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
}).setView([70, -100], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 27136], mapMaxZoom),
map.unproject([50176, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('http://visuarch.net/map/{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Copyright © 2014 Dovecot of St. James Memorial Park.',
noWrap: true
}).addTo(map);
map.attributionControl.setPrefix('');
var plotset3 = [
[80.1261, -101.7334],
[80.93535, -90.54932],
[78.90816, -85.979],
[77.82332, -96.45996]
];
var plotset4 = [
[69.95291, -57.78809],
[68.22052, -69.16992],
[70.83025, -73.125],
[72.44879, -61.25977]
];
var plotset5 = [
[68.24497, -68.18115],
[68.19605, -60.6665],
[66.80057, -60.64453],
[66.86972, -68.20312]
];
var plotset6 = [
[66.19601, -67.03857],
[66.39036, -58.97461],
[60.72694, -53.23975],
[59.84481, -56.88721],
[59.22093, -56.25],
[58.43623, -59.43604]
];
var plotset = L.polygon([ plotset3, plotset4, plotset5, plotset6], {
color: "#000",
weight: 1,
}).addTo(map);
var popup = L.popup()
.setLatLng([73.64017, -100.32715])
.setContent( "<h4><center><b>JOHN DOE</b></center></h4> <center><img src='http://visuarch.net/dovecot/media/k2/items/cache/48ee1e8a0a8f50dce4f8cb9ab418e211_XS.jpg' border='1px'> </center><br>Section:<b> Park Section</b> <br> Plot ID:<b> J15</b>"
)
.openOn(map);
}
jQuery(document).ready(function() {
init();
});
</script>
这是我用于示例的代码:
var popup = L.popup()
.setLatLng([73.64017, -100.32715])
.setContent( "<h4><center><b>JOHN DOE</b></center></h4> <center><img src='http://visuarch.net/dovecot/media/k2/items/cache/48ee1e8a0a8f50dce4f8cb9ab418e211_XS.jpg' border='1px'> </center><br>Section:<b> Park Section</b> <br> Plot ID:<b> J15</b>")
.openOn(map);
我只需要知道如何在.setContent部分使用php来输出我需要的信息。
请帮忙!!!
尽可能详细,我对javascript不太满意。
感谢。
答案 0 :(得分:0)
我弄清楚了,见下文:
var content = "<ul>";
<?php foreach ($item2->extra_fields as $key=>$extraField): ?>
<?php if($extraField->value != ''): ?>
content += "<li class='<?php echo ($key%2) ? 'odd' : 'even'; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>'>";
<?php if($extraField->type == 'header'): ?>
content += "<h4 class='itemExtraFieldsHeader'><?php echo $extraField->name; ?></h4>";
<?php else: ?>
content += "<span class='itemExtraFieldsLabel'><?php echo $extraField->name; ?>:</span>";
content += "<span class='itemExtraFieldsValue'><?php echo $extraField->value; ?></span>";
<?php endif; ?>
content += "</li>";
<?php endif; ?>
<?php endforeach; ?>
content += "</ul>";
var popup = L.popup()
.setContent(content).openOn(map);