我热衷于在 Plotly.js 生成的 map 中使用 Canvas.js 或 Leaflet.js 图表来弹出窗口。然而，leaflet.JS 中的弹出窗口是 Javascript，即使我可以将自定义 HTML 放入弹出窗口中，我也无法稍后引用该弹出窗口中的 div 来设置其样式。
var candle1 = L.marker([51.495791, -0.13949219999994966], {
icon: candle1Icon }).addTo(map).bindPopup(document.getElementById("myDiv").innerHTML).openPopup();
我当前的方法是在页面上创建一个 div，隐藏它，然后调用 document.getElementByID.innerHTML 来获取 div 的内容(我的实时图表)。但是，这仅获取图表的 HTML，而不是实时更新 Javascript。
我的目标是让弹出窗口中出现这样的内容: http://canvasjs.com/html5-javascript-dynamic-chart/
我的代码已附上，这就是我的图表的样子:
.header {
position: absolute;
z-index: 10;
width: 100%;
text-align: center;
}
.card {
/*
background-color: #ece9da;
margin: 0 auto;
max-width: 50%;
border-radius: 0 0 120px / 0 0 6px 0;
border: 1px solid #ece9da;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(128, 128, 128, .1)inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(128, 128, 128, .1)inset;
*/
}
.header h1 {
font-size: 35pt;
text-shadow: 0px 1px 1px #4d4d4d;
/* font-family: 'Niconne', cursive;*/
padding: 10px;
/* color: #cd0a0c;*/
content: "";
}
.header i {
color: #ece9da;
font-size: 15pt;
text-shadow: 0px 1px 1px #4d4d4d;
}
/*defined height for the map*/
html {
background-color: '#000';
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
position: relative;
padding: 0;
margin: 0;
}
.container {
height: 100%;
width: 100%;
}
#myDiv.hidden {
display: none;
}
#map {
z-index: 0;
height: 100%;
width: 100%;
}
.leaflet-marker-icon {
z-index: 3;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- font -->
<link href='https://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'>
<!-- Plotly graphs-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- div to put the map in -->
<div class="header">
<div class="card">
<h1>
SubsIoT Heatmap
</h1>
</div>
</div>
<div class="hidden" id="myDiv" style="width: 300px; height: 300px;">
Westminster Cathedral
</div>
<div id="vignette"></div>
<div id="map"></div>
<!-- include LeafletJS -->
<script src="leaflet/leaflet.js"></script>
<!-- for your eye pleasure add the toner map -->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<!-- include RelayrJS -->
<script src="https://developer.relayr.io/relayr-browser-sdk.min.js"></script>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
<!--
<div id="myDiv" style="width: 480px; height: 400px;">
"Westminster Cathedral"
</div>
-->
<script>
// load the map and set the view to Aviva Offices
var map = new L.map('map').setView([51.5141289, -0.08157860000005712], 13);
//load the toner layer
var layer = new L.StamenTileLayer("toner-lite");
//add a layer
// map.addLayer(layer);
//or add a tile layer get from Mapbox.com
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//define an icon class
var CandleIcon = L.Icon.extend({
options: {
iconSize: [90, 90],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
}
});
//create icons
var candle1Icon = new CandleIcon({
iconUrl: 'leaflet/images/building.png'
}),
candle2Icon = new CandleIcon({
iconUrl: 'leaflet/images/building.png'
}),
candle3Icon = new CandleIcon({
iconUrl: 'leaflet/images/building.png'
});
candle4Icon = new CandleIcon({
iconUrl: 'leaflet/images/building.png'
});
candle5Icon = new CandleIcon({
iconUrl: 'leaflet/images/building.png'
});
var data =
[
{
x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
y: [1, 3, 6],
type: 'scatter'
}
];
Plotly.newPlot('myDiv', data);
//shortcut for easy naming
L.icon = function (options) {
return new L.Icon(options);
};
//set the marker and some random start values
//Westminster Cathedral
var candle1 = L.marker([51.495791, -0.13949219999994966], {
icon: candle1Icon
}).addTo(map).bindPopup(document.getElementById("myDiv").innerHTML).openPopup();
//FCA Building
var candle2 = L.marker([51.50561740000001, -0.02005209999992985], {
icon: candle2Icon
}).addTo(map).bindPopup("Financial Conduct Authority Offices").openPopup();
//Deutsche Bank
var candle3 = L.marker([51.5162643, -0.08466120000002775], {
icon: candle3Icon
}).addTo(map).bindPopup("Deutsche Bank Offices").openPopup();
//Transport for London
var candle4 = L.marker([51.499518, -0.1350652999999511], {
icon: candle4Icon
}).addTo(map).bindPopup("TFL Development").openPopup();
//Brit Insurance
var candle5 = L.marker([51.51543410000001, -0.0829890999999634], {
icon: candle5Icon
}).addTo(map).bindPopup("Brit Insurance Building").openPopup();
//Relayr Credentials
var AppID = "f5cf0531-8830-4566-b751-44a1b2d9f71b";
var toke = "8Bn7zu.q0MkC_aoIGmHLSG_Ewq08VW4M";
var Candle1_deviceId = "452411b1-6b68-4fa6-b9f2-7c5d0b7b7c2d";
var relayr = RELAYR.init({
appId: AppID
});
relayr.devices().getDeviceData({
token: toke,
deviceId: Candle1_deviceId,
incomingData: function (data) {
console.log("co");
console.log(data.readings[0].meaning);
console.log(data.readings[0].value);
console.log(data.readings[1].meaning);
console.log(data.readings[1].value);
console.log(data.readings[2].meaning);
console.log(data.readings[2].value);
//Humidity data coming through
if (data.readings[0].meaning == "Fire") {
console.log(data.readings[0].value);
//if true then
if (data.readings[0].value == 0) {
//set LatLng
candle1.setLatLng([data.readings[1].value, data.readings[2].value]);
//show candle
candle1.addTo(map);
//false
} else {
//remove candle
map.removeLayer(candle1);
}
}
}
});
</script>
</body>附加屏幕截图: 4
最佳答案
这里您缺少的是，您设置为内容的 HTML 仅在您打开弹出窗口时附加到文档中。一旦你关闭它，它又消失了。因此，您需要在弹出窗口打开时初始化您的内容。每当打开弹出窗口时， map 上就会触发一个事件:
Fired when a popup is opened
http://leafletjs.com/reference.html#map-popupopen
在刚刚打开的弹出窗口的标记上:
Fired when a popup bound to the marker is open.
http://leafletjs.com/reference.html#marker-popupopen
您可以选择其中之一并在其处理程序中初始化图表:
var map = new L.Map('leaflet', {
'center': [0, 0],
'zoom': 0,
'layers': [
new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
'attribution': '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
})
]
});
var marker = new L.Marker([0, 0])
.bindPopup('<div id="foo"></div>')
.on('popupopen', function (e) {
Plotly.newPlot('foo', [{
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
type: 'scatter'
}], {
autosize: false,
width: 300,
height: 150,
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 0
}
});
}).addTo(map);body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}
#foo {
width: 300px;
height: 150px;
}<!DOCTYPE html>
<html>
<head>
<title>Leaflet 0.7.7</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script type="application/javascript" src="//cdn.plot.ly/plotly-latest.min.js"></script>
</body>
</html>关于javascript - 如何添加带有动态更新图表的 map 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35671693/