我热衷于将Plotly.js或Canvas.js图表用于Leaflet.js生成的地图中的弹出窗口。但是，leaflet.JS中的弹出窗口是Javascript，即使我可以将自定义HTML放入弹出窗口，我也不能在稍后的弹出窗口中引用它来设置样式。
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
答案 0 :(得分：2)
您在此处缺少的是，您设置为内容的HTML仅在您打开弹出窗口时附加到文档中。一关闭它就会再次消失。因此，您需要在弹出窗口打开时初始化您的内容。每当打开弹出窗口时，地图上都会触发一个事件：
打开弹出窗口时触发
http://leafletjs.com/reference.html#map-popupopen
在弹出窗口打开的标记上：
当绑定到标记的弹出窗口打开时触发。
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>