在R或Python中添加图像/视频的最简单方法绘图标记单击弹出式菜单/infowind
回答此问题可获得 20 贡献值，回答如果被采纳可获得 50 分。
<p>我有许多不同的（纬度，长数据）点与独特的地名和对应的每一点特定的图像或视频数据。现在我想创建一个html文件，如果用户单击每个点，他们可以在弹出/信息窗口中看到特定的图像或视频。以前，我已经成功地将html文件用于我的shiny web应用程序。在</p>
<p>目标示例链接如下所示，但都是Java语言：</p>
<ol>
<li><a href="http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html" rel="nofollow">custom image in marker</a></li>
<li><p><a href="http://jsfiddle.net/Godinall/Xk6Uu/" rel="nofollow">custom video in marker</a></p>
<pre><code><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>
</code></pre>
<p>在
</p></li>
<li><p><a href="http://jsfiddle.net/sST8z/" rel="nofollow">streetview image in marker</a></p>
<pre><code>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);
</code></pre></li>
</ol>
<p>首先，我尝试了plotGoogleMaps，在那里我必须手动更改为每个标记生成的html文件javascript部分代码，这样就需要大量的手动工作。那么，在“传单”或“rleafmap”R包或任何其他基于R的包的组合中有没有实现相同的方法呢？在</p>
<p>我更多的是从Python来的R less，在Python中有没有什么简单的解决方案至少可以生成那个html页面。我只想构建那个html文件，这样我就可以在闪亮的web框架中使用了。在</p>
<p>最后，
我在下面试过了，但空白页即将出现。在</p>
<pre><code> <!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.<a href="https://www.cnpython.com/list/append" class="inner-link">append</a>Child(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>
</code></pre>
请先 登录 后评论
针对此问题: 更多的回答
- 89 关注
- 1 收藏，216 浏览
- 网友 提问于 2天前
相关Python问题
- 如何添加虚拟方法 10 回答
- 如何添加表示整数的擦边字符串？ 10 回答
- 如何添加要在Bokeh中使用的新font.ttf文件？ 1 回答
- 如何添加要显示的矩阵XY轴编号和XY轴 8 回答
- 如何添加计数？ 8 回答
- 如何添加计数器函数？ 6 回答
- 如何添加计数器列来计算数据帧中另一列中的特定值？ 6 回答
- 如何添加计数器来跟踪while循环中的月份和年份？ 7 回答
- 如何添加计数并删除countplot的顶部和右侧脊椎？ 3 回答
- 如何添加计时器wx.应用程序更新窗口对象的主循环？ 2 回答
- 如何添加评论到帖子？PostDetailVew，Django 2.1.5 4 回答
- 如何添加评论拉梅尔亚姆 5 回答
- 如何添加诸如矩阵Python/Pandas之类的数据帧？ 10 回答
- 如何添加谷歌地点自动完成到Flask？ 7 回答
- 如何添加超时、python discord bot 6 回答
- 如何添加超过1dp的检查 4 回答
- 如何添加距离方法 8 回答
- 如何添加跟随游戏的敌人精灵 4 回答
- 如何添加路径以便python可以找到程序？ 6 回答
- 如何添加身份验证/安全性以使用happybase访问HBase？ 3 回答
