我正在使用R包plotGoogleMaps来绘制像this这样的地图，并且它可以工作：我得到一个像这样的html文件和图例。
我希望能够在Joomla或其他CMS中的文章中显示此结果，就像我通常使用图像一样（我不想丢失我的网站的CSS和样式），但我不知道怎么做。
从示例的来源可以看出，该文件包含两个长脚本（其中一个在链接中），我不知道如何将它们包含在我文章的标题中。
第二个问题（不太重要）是使用这个函数会更容易，如果它将文章中应该从脚本中分离的html和应该在标题中的CSS样式分开，那么我不必每次都剪切和粘贴，拆分这些元素并将它们放在正确的位置。
我插入了一个简单，较短的示例（图例不可见，因为它是一个分离的图像），这里只有一个小多边形和一个变量，所以应该更容易理解结构：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% ; font-size: small}
body { height: 100%; margin: 0px; padding: 0px }
#Map { float: left;
width:800px;
height:600px; }
#cBoxes {float: left;
width:200px;
height: 600px;
overflow:auto}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3.18"> </script>
<script language="javascript">
USGSOverlay.prototype = new google.maps.OverlayView();
function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map); }
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("DIV");
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
div.appendChild(img);
this.div_ = div;
this.div_.style.opacity = 0.7;
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div_);}
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = (ne.x - sw.x) + "px";
div.style.height = (sw.y - ne.y) + "px";}
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);}
USGSOverlay.prototype.hide = function() { if (this.div_) { this.div_.style.visibility = "hidden";} }
USGSOverlay.prototype.show = function() {if (this.div_) { this.div_.style.visibility = "visible";}}
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide(); } } }
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);}}
function setOpacR(Raster,textname) {
opac=0.01*parseInt(document.getElementById(textname).value)
Raster.div_.style.opacity= opac }
var GoogleMap
var polyaXxcxxpoverixxX9603 =[] ;
var polygon= new google.maps.Polygon({
paths:[ new google.maps.LatLng( 43.861701965332 , 10.7270231246949 ),
new google.maps.LatLng( 43.8648071289063 , 10.7138719558716 ),
new google.maps.LatLng( 43.86967086792 , 10.7096805572511 ),
new google.maps.LatLng( 43.8817100524903 , 10.6950511932374 ),
new google.maps.LatLng( 43.882724761963 , 10.6946687698365 ),
new google.maps.LatLng( 43.8834533691406 , 10.6946153640748 ),
new google.maps.LatLng( 43.8914604187013 , 10.6955518722535 ),
new google.maps.LatLng( 43.9005165100098 , 10.6986227035522 ),
new google.maps.LatLng( 43.9016075134278 , 10.6991891860961 ),
new google.maps.LatLng( 43.9121093750001 , 10.7056283950807 ),
new google.maps.LatLng( 43.9124259948731 , 10.70609664917 ),
new google.maps.LatLng( 43.9165954589843 , 10.7151222229004 ),
new google.maps.LatLng( 43.9173736572266 , 10.7183818817138 ),
new google.maps.LatLng( 43.9156303405762 , 10.7193155288697 ),
new google.maps.LatLng( 43.9152069091798 , 10.719415664673 ),
new google.maps.LatLng( 43.9097976684571 , 10.7180519104004 ),
new google.maps.LatLng( 43.9024848937989 , 10.7170953750611 ),
new google.maps.LatLng( 43.9018325805665 , 10.7173252105712 ),
new google.maps.LatLng( 43.8986053466798 , 10.7188882827759 ),
new google.maps.LatLng( 43.8957862854004 , 10.7206497192383 ),
new google.maps.LatLng( 43.8920631408693 , 10.7215881347657 ),
new google.maps.LatLng( 43.8915939331056 , 10.7216873168945 ),
new google.maps.LatLng( 43.8911895751954 , 10.7215261459351 ),
new google.maps.LatLng( 43.8880500793458 , 10.7201528549194 ),
new google.maps.LatLng( 43.8791160583496 , 10.7157011032104 ),
new google.maps.LatLng( 43.8631248474121 , 10.725196838379 ),
new google.maps.LatLng( 43.8628540039062 , 10.7253637313843 ),
new google.maps.LatLng( 43.8625869750978 , 10.7256422042847 ),
new google.maps.LatLng( 43.861701965332 , 10.7270231246949 )],
map:GoogleMap,
clickable:true,
fillColor: "#00FF00",
strokeColor: "",
strokeOpacity:1,
fillOpacity:0.7,
strokeWeight:1,
geodesic:true,
zIndex:null});
polyaXxcxxpoverixxX9603.push(polygon);
function showR(R,boxname, map) {
R.setMap(map);
document.getElementById(boxname).checked = true; }
function hideR(R,boxname) {
R.setMap(null);
document.getElementById(boxname).checked = false; }
function showO(MLPArray,boxname, map ) {
for (var i = 0; i < MLPArray.length; i++) {
MLPArray[i].setMap(map); }
document.getElementById(boxname).checked = true; }
function hideO(MLPArray,boxname) {
for (var i = 0; i < MLPArray.length; i++) {
MLPArray[i].setMap(null);}
document.getElementById(boxname).checked = false; }
function boxclick(box,MLPArray,boxname, map) {
if (box.checked) { showO(MLPArray,boxname, map);
}else { hideO(MLPArray,boxname);} }
function setOpac(MLPArray,textname){
opacity=0.01*parseInt(document.getElementById(textname).value)
for(var i = 0; i < MLPArray.length; i++) {
MLPArray[i].setOptions({strokeOpacity: opacity, fillOpacity: opacity}); }}
function setOpacL(MLPArray,textname) {
opacity=0.01*parseInt(document.getElementById(textname).value)
for (var i = 0; i < MLPArray.length; i++) {
MLPArray[i].setOptions({strokeOpacity: opacity});}}
function setLineWeight(MLPArray,textnameW){
weight=parseInt(document.getElementById(textnameW).value)
for (var i = 0; i < MLPArray.length; i++){
MLPArray[i].setOptions({strokeWeight: weight}); } }
function legendDisplay(box,divLegendImage){
element = document.getElementById(divLegendImage).style;
if (box.checked){ element.display="block";} else { element.display="none";}}
function boxclickR(box,R,boxname, map) {
if (box.checked){
showR(R,boxname,map); } else { hideR(R,boxname);} }
function legendDisplay(box,divLegendImage){
element = document.getElementById(divLegendImage).style;
if (box.checked){ element.display="block";} else { element.display="none";}}
function initialize() {
var latlng = new google.maps.LatLng( 43.8895378112793 , 10.7108192443848 ) ;
var myOptions = { zoom: 12 ,
center: latlng ,
mapTypeId: google.maps.MapTypeId.HYBRID ,
disableDefaultUI: false ,
disableDoubleClickZoom: false ,
draggable: true ,
keyboardShortcuts: true ,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT} ,
navigationControl: true ,
navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT} ,
noClear: false ,
scaleControl: true ,
scaleControlOptions: {style: google.maps.ScaleControlStyle.STANDARD} ,
scrollwheel: true ,
streetViewControl: false } ;
GoogleMap= new google.maps.Map(document.getElementById("Map"),myOptions);
var infowindow = new google.maps.InfoWindow({ content: "", disableAutoPan:false, maxWidth :330, pixelOffset :null, position :new google.maps.LatLng( 43.8901079074412 , 10.7096781253779 ) });
google.maps.event.addListener(polyaXxcxxpoverixxX9603[0] ,"click",function(event){
infowindow.setContent("poveri : 28 <br>");
infowindow.setPosition(event.latLng);
infowindow.open(GoogleMap)});
showO(polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603box",GoogleMap); google.maps.event.addListener( GoogleMap , 'rightclick', function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
alert('Lat=' + lat + '; Lng=' + lng);});
}
</script>
</head>
<body onload="initialize()">
<div id="Map"></div>
<div id="cBoxes">
<table border="0">
<tr>
<td>
<input type="checkbox" id="polyaXxcxxpoverixxX9603box"
onClick='boxclick(this,polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603box",GoogleMap);' /> <b> Economic Data<b> </td> </tr>
<tr> <td>
<input type="text" id="polyaXxcxxpoverixxX9603text" value="50" onChange='setOpac(polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603text")' size=3 />
Opacity (0-100 %) </td> </tr>
<tr> <td>
<input type="text"
id="polyaXxcxxpoverixxX9603W" value="1" onChange='
setLineWeight(polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603W")'
size=3 /> Line weight (pixels) </td> </tr>
<tr> <td> <input type="checkbox" checked="checked" id="boxLegend44c26773e95" onClick='legendDisplay(this,"Legend44c26773e95");' /> LEGEND </td> </tr> <tr> <td>poveri</td> </tr>
<tr> <td> <div style="display:block;" id="Legend44c26773e95"> <img src="Legend44c26773e95.png" alt="Legend" height="70%"> </div>
</td> </tr>
</table>
<hr>
</div>
</body>
</html>
我尝试使用CodeMirror编辑器（如建议here）发布Joomla中第一个示例的代码，但它不起作用。我不太了解Joomla，所以我无法进行太多实验：我担心我正在使用的网站可能会崩溃而且我从未安装过Joomla，所以这对我来说真的很难和很长时间安全测试（Joomla是我尝试的唯一CMS，但我的知识非常低）。
答案 0 :(得分：0)
一种解决方案可能是使用iframe tag。它允许在当前HTML文档中嵌入另一个文档。
这是一个例子：
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.fabioveronesi.net/Blog/Map_GoogleMaps_small.html" target="Map" height="1500px" width=1500 ></iframe>
</body>
</html>