Javascript 在R或Python中，在地图打印标记中添加图像/视频的最简单方法是单击弹出窗口/信息窗口_Javascript_Python_Html_R_Google Maps

Javascript 在R或Python中，在地图打印标记中添加图像/视频的最简单方法是单击弹出窗口/信息窗口

javascript python html r google-maps

Javascript 在R或Python中，在地图打印标记中添加图像/视频的最简单方法是单击弹出窗口/信息窗口,javascript,python,html,r,google-maps,Javascript,Python,Html,R,Google Maps,我有许多不同的（纬度，长数据）世界点与独特的地名和对应的每个点特定的图像或视频数据。现在我想创建一个html文件，如果用户单击每个点，他们可以在弹出/信息窗口中看到特定的图像或视频。以前，我已经成功地将html文件与我的闪亮web应用程序结合使用目标示例链接如下所示，但都是Java：首先，我尝试了plotGoogleMaps，在那里，我必须手动更改每个标记生成的html文件javascript部分代码，因此这将成为大量的手动工作。那么，在“传单”或“rleafmap”R软件包或基于R的

我有许多不同的（纬度，长数据）世界点与独特的地名和对应的每个点特定的图像或视频数据。现在我想创建一个html文件，如果用户单击每个点，他们可以在弹出/信息窗口中看到特定的图像或视频。以前，我已经成功地将html文件与我的闪亮web应用程序结合使用

目标示例链接如下所示，但都是Java：

首先，我尝试了plotGoogleMaps，在那里，我必须手动更改每个标记生成的html文件javascript部分代码，因此这将成为大量的手动工作。那么，在“传单”或“rleafmap”R软件包或基于R的软件包的任何其他组合中，是否有任何方法可以实现同样的效果

我更多地来自R，而不是Python，Python中是否存在任何简单的解决方案，至少可以生成html页面。我只想构建那个html文件，以便在闪亮的web框架中使用

最后,，我在下面试过了，但出现了空白页

 <!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_canvas {min-height: 100%;height:auto; } 
 #cBoxes {position:absolute;right:5px; top:50px; background:white}
</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 } 


// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(28.70, -127.50),
  new google.maps.LatLng(48.85, -55.90)
);
var boundLimits = {
  maxLat : allowedBounds.getNorthEast().lat(),
  maxLng : allowedBounds.getNorthEast().lng(),
  minLat : allowedBounds.getSouthWest().lat(),
  minLng : allowedBounds.getSouthWest().lng()
};

var images = [{url:"http://images.com/rome.png", position:new google.maps.LatLng(27.7220605,91.8254337)},
              url:"http://assetscdn.paytm.com/images/catalog/product/A/AP/APPILCHEI-TRENDILCH29488C3956E0D_29487/0x1920/70/0.jpg", position:new google.maps.LatLng(15.5967635,73.8928171)},
              url:"http://img5a.flixcart.com/image/sari/x/z/c/11036-roop-kashish-400x400-imadq4f6n3fh6kht.jpeg", position:new google.maps.LatLng(30.9740215,77.1982669)},
              url:"http://stat.homeshop18.com/homeshop18/images/productImages/958/de-marca-faux-chiffon-saree-yellow-240X336-5X7-240fabfeb551480eba911e34d90b4a20.jpg", position:new google.maps.LatLng(12.303889,76.654444)}];

for(var i=0l i<images.length; i++){
  var m = new google.maps.Marker({position:images[i].position});
  m.infow = new google.maps.InfoWindow("HTML using image template, splicing in the URL using '+''s");
  google.maps.event.addListener(m, 'click', function(){
    this.infow.setPosition(this.getPosition());
    this.infow.open(map);
  });
}

</script> 
 </body>  
  </html>


html{高度：100%；字体大小：小}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{最小高度：100%；高度：自动；}
#cBoxes{位置：绝对；右侧：5px；顶部：50px；背景：白色}
USGSOverlay.prototype=new google.maps.OverlayView（）；
函数USGSOverlay（边界、图像、地图）{
this.bounds=bounds；
this.image=image；
this.map=map；
this.div=null；
this.setMap（map）；}
USGSOverlay.prototype.onAdd=函数（）{
var div=document.createElement（“div”）；
div.style.border=“无”；
div.style.borderWidth=“0px”；
div.style.position=“绝对”；
var img=document.createElement（“img”）；
img.src=this.image；
img.style.width=“100%”；
img.style.height=“100%”；
儿童分部（img）；
this.div=div；
this.div_.style.opacity=0.7；
var panes=this.getPanes（）；
panes.overlayImage.appendChild（this.div)}
USGSOverlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var sw=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getSouthWest（））；
var ne=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getNorthEast（））；
var div=this.div_2;；
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=函数（）{
this.div..parentNode.removeChild（this.div）；}
USGSOverlay.prototype.hide=function（）
USGSOverlay.prototype.show=function（）
USGSOverlay.prototype.toggle=函数（）{
如果（this.div){
如果（this.div_uzy.style.visibility==“hidden”）{
this.show（）；
}否则{
this.hide（）；}}
USGSOverlay.prototype.toggleDOM=函数（）{
if（this.getMap（））{
此.setMap（null）；
}否则{
this.setMap（this.map_41;}
函数setOpacR（光栅，文本名）{
opac=0.01*parseInt（document.getElementById（textname.value）
graster.div_u2;.style.opacity=opac}
//所需区域的边界
var allowedBounds=new google.maps.LatLngBounds(
新google.maps.LatLng（28.70，-127.50），
新google.maps.LatLng（48.85，-55.90）
);
var boundLimits={
maxLat:allowedBounds.getNorthEast（）.lat（），
maxLng:allowedBounds.getNorthEast（）.lng（），
minLat:allowedBounds.getSouthWest（）.lat（），
minLng:allowedBounds.getSouthWest（）.lng（）
};
var images=[{url:]http://images.com/rome.png，位置：new google.maps.LatLng（27.7220605,91.8254337）}，
url:“http://assetscdn.paytm.com/images/catalog/product/A/AP/APPILCHEI-TRENDILCH29488C3956E0D_29487/0x1920/70/0.jpg，位置：new google.maps.LatLng（15.5967635,73.8928171）}，
url:“http://img5a.flixcart.com/image/sari/x/z/c/11036-roop-kashish-400x400-imadq4f6n3fh6kht.jpeg，位置：new google.maps.LatLng（30.9740215,77.1982669）}，
url:“http://stat.homeshop18.com/homeshop18/images/productImages/958/de-marca-faux-chiffon-saree-yellow-240X336-5X7-240fabfeb551480eba911e34d90b4a20.jpg“，位置：new google.maps.LatLng（12.303889,76.654444）}]；
对于（var i=0l i来说，假设您已经有了一个图像和/或视频的URL列表，这将非常简单，只需在JavaScript中迭代这些URL，然后在JavaScript中组装HTML。创建大量HTML页面并调用它们，这将是不必要的复杂
var images = [{url:"http://images.com/rome.png", position:new google.maps.LatLng()}, ....];
var videos = [{url:"http://videos.com/borneo.wav", position:new google.maps.LatLng()}, ....];
for(var i=0l i<images.length; i++){
  var m = new google.maps.Marker({position:images[i].position});
  m.infow = new google.maps.InfoWindow("HTML using image template, splicing in the URL using '+''s");
  google.maps.event.addListener(m, 'click', function(){
    this.infow.setPosition(this.getPosition());
    this.infow.open(map);
  });
}
//same for videos

var-images=[{url:http://images.com/rome.png，位置：new google.maps.LatLng（）}，…]；
var videos=[{url:]http://videos.com/borneo.wav，位置：new google.maps.LatLng（）}，…]；
对于R中的（var i=0l i，您可以使用我的软件包（它有一个Google Maps小部件）来执行此操作。您可以使用普通的html
自定义标记信息窗口
要使用谷歌地图，您还需要一个有效的谷歌地图API密钥
library(googleway)

#key <- "your_api_key_here"

df <- data.frame(lat = -37.817714,
                 lon = 144.967260,
                 info = '<div id="bodyContent"><iframe width="640" height="390" src="//www.youtube.com/embed/a8UOzBUZxCw" frameborder="0" allowfullscreen></iframe></div>')

google_map(key = key, height = 600, search_box = T) %>%
    add_markers(data = df, info_window = "info")

library（googleway）
#关键%
添加标记（数据=测向，信息窗口=“信息”）

你已经有了什么数据？仅仅是图像/视频url吗？如何访问本地图像？它会像{url:“D:/R Projects/rome.png”一样工作吗，位置：new google.maps….使用文件：//
代替http://。但是如果你正在制作一个web应用程序，如果可能的话，你应该尝试在线上传你的图像。这将使你的应用程序更容易访问。我已经按照你的建议用新代码更新了我的问题，但是页面是空白的…请帮助..你的想法是好的，我会接受你的回答并用javascript代码提出一个新问题……但是请帮助我请删除你的电子邮件。我也给你发了一条消息。
var images = [{url:"http://images.com/rome.png", position:new google.maps.LatLng()}, ....];
var videos = [{url:"http://videos.com/borneo.wav", position:new google.maps.LatLng()}, ....];
for(var i=0l i<images.length; i++){
  var m = new google.maps.Marker({position:images[i].position});
  m.infow = new google.maps.InfoWindow("HTML using image template, splicing in the URL using '+''s");
  google.maps.event.addListener(m, 'click', function(){
    this.infow.setPosition(this.getPosition());
    this.infow.open(map);
  });
}
//same for videos

library(googleway)

#key <- "your_api_key_here"

df <- data.frame(lat = -37.817714,
                 lon = 144.967260,
                 info = '<div id="bodyContent"><iframe width="640" height="390" src="//www.youtube.com/embed/a8UOzBUZxCw" frameborder="0" allowfullscreen></iframe></div>')

google_map(key = key, height = 600, search_box = T) %>%
    add_markers(data = df, info_window = "info")