在R或Python中添加图像/视频的最简单方法绘图标记单击弹出式菜单/infowind

2024-09-30 16:37:46 发布

您现在位置：Python中文网/ 问答频道 /正文
9776 3

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

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

  1. custom image in marker

  2. custom video in marker

    <script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Video in Info Window</h1>'+
  '<div id="bodyContent">'+
  '<iframe width="640" height="390" src="//www.youtube.com/embed/a8UOzBUZxCw" frameborder="0" allowfullscreen></iframe>'+
  '</div>'+
  '</div>';

  var infowindow = new google.maps.InfoWindow({
  content: contentString
  });

  var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

    在

  3. streetview image in marker

    var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    street = new google.maps.StreetViewPanorama(document.getElementById("street"), { 

    position: new google.maps.LatLng(40.72982797782924, -73.98622512817383),
    zoomControl: false,
    enableCloseButton: false,
    addressControl: false,
    panControl: false,
        linksControl: false
  });


  var infow = new google.maps.InfoWindow({ content: document.getElementById("street") });
  var myLatLng = new google.maps.LatLng(40.72982797782924, -73.98622512817383);
  var marker = new google.maps.Marker({ position: myLatLng, map: map, visible: true });

  infow.open(map, marker);
  map.setCenter(myLatLng);

  }
  google.maps.event.addDomListener(window, 'load', initialize);

首先，我尝试了plotGoogleMaps，在那里我必须手动更改为每个标记生成的html文件javascript部分代码，这样就需要大量的手动工作。那么，在“传单”或“rleafmap”R包或任何其他基于R的包的组合中有没有实现相同的方法呢？在

我更多的是从Python来的R less，在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>

Tags： imagedivmapnewstylevarhtmlgoogle
2条回答
网友
1楼 · 编辑于 2024-09-30 16:37:46

在R中，您可以使用我的包googleway来实现这一点，它有一个googlemaps小部件。您可以使用普通html自定义标记信息窗口。在

要使用googlemaps，还需要一个有效的googlemapsapi密钥

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")

enter image description here

网友
2楼 · 编辑于 2024-09-30 16:37:46

假设您已经有了一个图像和/或视频的url列表，那么简单到可以用JavaScript迭代它们，然后用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

这将是高效、可读和可伸缩的，而不是复制和粘贴。在

因此，据我所知，您不需要Python或R来解决它。在

相关问题 更多 >

    编程相关推荐