0
私はthisのようなマップをプロットするためにRパッケージのplotGoogleMapsを使用しています。このようなhtmlファイルと凡例のイメージが表示されます。plotGoogleMaps R CMSのパッケージ
この結果をJoomlaや他のCMSの記事で見ることができるようにしたいのですが、通常は画像で行います（私はCSSとサイトのスタイルを失いたくありません）。私はそれをする方法を知らない。
例のソースからわかるように、このファイルには2つの長いスクリプトが含まれています（そのうちの1つはリンクにあります）、私は自分の記事のヘッダーにそれらを含める方法がわかりません。
2番目の問題（それほど重要ではない）は、この機能を使用する方が簡単であることです。スクリプトから記事に移動するhtmlとヘッダーに含めるCSSスタイルを分けると、私は毎回カットアンドペーストして、これらの要素を分割して適切な場所に配置する必要はありません。
小さなポリゴンと1つの変数だけを使って簡単な短い例を挿入しました（凡例は分割された画像であるため表示されません）。構造がわかりやすいはずです。
<!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.4),
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>私は（提案hereなど）CodeMirrorエディタでのJoomlaの最初の例のコードを公開しようとしたが、それはうまくいきませんでした。私はJoomlaについてあまりよく知らないので、私はとても実験することができません。私が働いているサイトがクラッシュする恐れがあり、Joomlaをインストールしたことがないので、試してみるのは本当に難しく、 （Joomlaは私が試した唯一のCMSですが、私の知識は本当に低いです）。
あなたの質問には良いかもしれないが、私はあなたがそれにより少し仕事をしなければならないと思います。まずリンクは時間の経過とともに壊れやすい傾向があります。あなたのhtmlの部分（完全に "長いスクリプト"ではなく、少なくともそれの最初と最後）を定義します。第二に、あなたは何を試しましたか？たとえば、CMSを使用してエントリを公開し、グラフのhtmlを追加し、2つのスクリプトを含めるとどうなりますか？ （私はJoomlaのを知りませんが、私はあなたがHTMLを公開することができます任意のCMSに推測します）。ありがとう。提案のための – lrnzcig
ありがとう：それは、このサイトでは私の最初の質問です。構造を理解しやすくする必要がありますので、小さな行政区域のちょうど1つのポリゴンとただ一つの変数を使用して、： 私はちょうど短い例（埋め込まれたCSSとスクリプトとの完全なHTMLが、完全な）を含めました。私はJoomlaでそれをテストするために何をしたかについての情報も追加しました。 –