堆栈内存溢出
  繁体   English   中英

CMS上的plotGoogleMaps R包

[英]plotGoogleMaps R package on CMS

 原文  2016-08-05 13:23:34  6   1    javascript/ html/ r/ google-maps/ joomla

问题描述

我使用R包plotGoogleMaps绘制地图像这样和它的作品：我得到这样一个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>

我试着在发布的Joomla与CodeMirror编辑器的第一个例子的代码（如建议在这里 ），但没有奏效。 我对Joomla不太了解，因此无法做太多实验：我正在使用的网站可能会崩溃，而且我从未安装过Joomla，因此尝试起来真的很困难而且很漫长安全测试（Joomla是我尝试过的唯一CMS，但是我的知识真的很低）。

1 个解决方案

解决方案1
 0  2016-08-06 10:53:43

一种解决方案可能是使用iframe广告代码 。 它允许将另一个文档嵌入当前的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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 有没有办法在 R 中使用 Javascript 包？ R / Shiny字签包中的系列突出显示图例 R networkD3包：forceNetwork（）着色 R 中的粗体文本 using.networkD3 package R networkD3包：simpleNetwork（）中的节点着色 R闪亮包装中的父/子行 “ node -r package.json”-如何访问内部对象？ 将从R-animation包生成的html文件上传到wordpress R传单包产生空白（灰色）图[Ubuntu 14.04] 使用Rook包将文件名从javascript传递给R.
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM