yeyuguo
8/7/2017 - 4:08 PM
leaflet 同时打开多个 popup
leaflet 同时打开多个 popup
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="./js/leaflet/leaflet.css">
<script src="./js/leaflet/leaflet.js"></script>
<script src="./js/leaflet/leaflet.js.map"></script>
<style>
.container{
display: flex;
align-items: center;
height: 100%;
}
#leafleftMap{
width: 1000px;
height: 600px;
margin: auto;
border:1px solid #444;
border-radius: 5px;
}
.map_echart{
width: 300px;
height: 200px;
border:1px dotted #444;
}
</style>
</head>
<body>
<div class="container">
<div id="leafleftMap"></div>
</div>
<!-- <div id="map_echart" onload="xixi()" ></div> -->
<script src='./js/echarts.min.js'></script>
<script>
window.onload = function(){
var lonlngs =[[51.5, -0.09],[51.3, -0.09],[51.5, -0.5]]
init(lonlngs,renderEchart)
// init([51.5, -0.09],renderEchart)
}
function init(latlngs,fn){
var latlngs = latlngs || [51.5, -0.09]
console.log(latlngs)
var map = L.map('leafleftMap').setView([51.5, -0.09], 10);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var pop1 = L.popup({autoClose: false,closeOnClick:false}).setContent('<b>Hello world!</b><br />I am a popup.')
var marker1 = L.marker(latlngs[0]).addTo(map)
marker1.bindPopup(pop1)
.openPopup()
//.openPopup();
var pop2 = L.popup({autoClose: false,closeOnClick:false}).setContent('Not closeable by other openPopup calls')
var marker2 = L.marker(latlngs[1]).addTo(map)
marker2.bindPopup(pop2)
.openPopup()
if(latlngs instanceof Array){
latlngs.map(function(item,index){
new Promise(function(resolve, reject){
/*
解决 leaflet 加载多个 popup
参考文章：
1.https://github.com/Leaflet/Leaflet/pull/2986
2.https://github.com/Leaflet/Leaflet/pull/2986/commits/a35d58e404e7a81c31945d977fa3232f07d8cc14#diff-01d2b1169c18b2d745910b7f62475ee9
3.http://leafletjs.com/reference-1.1.0.html#popup
*/
index
var popup = L.popup({
autoClose: false, // 控制 点击 另外一个 popup，是否关闭当前 popup
closeOnClick:false // 控制 点击非 popup 位置，是否关闭 popup
}).setContent(`<div class="map_echart" id="map_echart_${index}"></div>`)
// var popup = L.popup({autoClose: false,closeOnClick:false}).setContent('Not closeable by other openPopup calls')
var marker = L.marker(item).addTo(map)
marker.bindPopup(popup)
.openPopup()
marker.on('click',function(e){
fn(index)
})
resolve(index)
}).then(fn)
})
}
// // popup
// var popup = L.popup({
// keepInView:true,
// closeOnClick:false
// });
// popup.setLatLng(latlngs[0])
// .setContent("<h1>You clicked the map at</h1> ")
// // .setContent('<div class="map_echart" id="map_echart_0"></div>')
// .openOn(map);
}
function renderPopup(popup,map,latlng,index){
popup.setLatLng(latlng)
// .setContent("<h1>You clicked the map at</h1> "+latlng)
.setContent(`<div class="map_echart" id="map_echart_${index||0}"></div>`)
.openOn(map);
}
function renderEchart(msg,domNodeId){
// if(msg !='ok'){
if(typeof msg != 'number'){
console.error('没有节点')
return
}
// var promise = new Promise()
var option = {
title: {
text: '一天用电量分布'+msg.toString(),
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
pieces: [{
lte: 6,
color: 'green'
}, {
gt: 6,
lte: 8,
color: 'red'
}, {
gt: 8,
lte: 14,
color: 'green'
}, {
gt: 14,
lte: 17,
color: 'red'
}, {
gt: 17,
color: 'green'
}]
},
series: [
{
name:'用电量',
type:'line',
smooth: true,
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}
}
]
};
var myChart = echarts.init(document.getElementById(`map_echart_${msg}`));
myChart.setOption(option);
}
</script>
</body>
</html><!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="./js/leaflet/leaflet.css">
<script src="./js/leaflet/leaflet.js"></script>
<script src="./js/leaflet/leaflet.js.map"></script>
<style>
.container{
display: flex;
align-items: center;
height: 100%;
}
#leafleftMap{
width: 1000px;
height: 600px;
margin: auto;
border:1px solid #444;
border-radius: 5px;
}
.map_echart{
width: 300px;
height: 200px;
border:1px dotted #444;
}
</style>
</head>
<body>
<div class="container">
<div id="leafleftMap"></div>
</div>
<script>
window.onload = function(){
/*
解决 leaflet 加载多个 popup
参考文章：
1.https://github.com/Leaflet/Leaflet/pull/2986
2.https://github.com/Leaflet/Leaflet/pull/2986/commits/a35d58e404e7a81c31945d977fa3232f07d8cc14#diff-01d2b1169c18b2d745910b7f62475ee9
3.http://leafletjs.com/reference-1.1.0.html#popup
*/
var pop1 = L.popup({autoClose: false,closeOnClick:false}).setContent('<b>Hello world!</b><br />I am a popup.')
var marker1 = L.marker(latlngs[0]).addTo(map)
marker1.bindPopup(pop1)
.openPopup()
//.openPopup();
var pop2 = L.popup({autoClose: false,closeOnClick:false}).setContent('Not closeable by other openPopup calls')
var marker2 = L.marker(latlngs[1]).addTo(map)
marker2.bindPopup(pop2)
.openPopup()
}
</script>
</body>
</html>