0
Ich benutze das R-Paket plotGoogleMaps, um eine Karte wie this zu plotten und es funktioniert: Ich bekomme eine HTML-Datei wie diese und ein Bild für die Legende.plotGoogleMaps R-Paket auf CMS
Ich würde gerne in der Lage sein, dieses Ergebnis in einem Artikel in Joomla oder einem anderen CMS zu zeigen, wie ich es normalerweise mit einem Bild machen würde (ich will nicht das CSS und den Stil meiner Seite verlieren), aber Ich weiß nicht, wie ich es machen soll.
Wie Sie aus der Quelle des Beispiels sehen können, enthält die Datei zwei lange Skripts (eines davon ist in einem Link) und ich weiß nicht, wie Sie sie in den Header meines Artikels aufnehmen.
Ein sekundäres Problem (weniger wichtig) ist, dass es einfacher wäre, diese Funktion zu verwenden, wenn es das HTML trennen würde, das in den Artikel von den Skripts und dem CSS-Stil gehen sollte, der in der Kopfzeile sein sollte Ich muss nicht jedes Mal schneiden und einfügen, um diese Elemente zu teilen und sie an den richtigen Ort zu bringen.
Ich habe hier ein einfaches, kürzeres Beispiel eingefügt (die Legende ist nicht sichtbar, weil es ein getrenntes Bild war) hier mit nur einem kleinen Polygon und nur einer Variablen, also sollte es einfacher sein, die Struktur zu verstehen:
<!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>ich habe versucht, den Code des ersten Beispiels in Joomla mit dem Codemirror-Editor zu veröffentlichen (wie here vorgeschlagen), aber es hat nicht funktioniert. Ich weiß nicht viel über Joomla, daher kann ich nicht viel experimentieren: Ich fürchte, die Seite, mit der ich arbeite, könnte abstürzen und ich habe Joomla noch nie installiert, also wäre es wirklich schwierig und lang für mich, es zu versuchen sichere Tests (Joomla ist das einzige CMS, das ich ausprobiert habe, aber mein Wissen ist wirklich niedrig).
Meiner Meinung nach könnte Ihre Frage gut sein, aber ich glaube, Sie haben ein wenig mehr daran zu arbeiten. Erstens neigen Links dazu, mit der Zeit zu brechen, wenn Sie z. Teile Ihres HTML (definitiv nicht das "lange Skript" in vollem Umfang, aber zumindest der Anfang und das Ende davon). Zweitens, was hast du probiert? Was passiert beispielsweise, wenn Sie Ihr CMS verwenden und Ihren Eintrag veröffentlichen, den HTML-Code des Diagramms hinzufügen und die beiden Skripts einschließen? (Ich kenne Joomla nicht, aber ich denke in jedem CMS kannst du html veröffentlichen). Vielen Dank. – lrnzcig
Danke für den Vorschlag: es ist meine erste Frage auf dieser Seite. Ich habe gerade ein kürzeres Beispiel (aber komplett: voll HTML mit eingebetteten CSS und Skripten), mit nur einem Polygon eines kleinen administrativen Bereichs und nur eine Variable, so sollte es leichter sein, die Struktur zu verstehen. Ich habe auch weitere Informationen darüber hinzugefügt, was ich getan habe, um es auf Joomla zu testen. –