宣传单显示所有制作人的所有弹出窗口并保留在地图中 [英] Leaflet show all popups of all the makers and keep in the map
问题描述
我指的是快速入门指南 - 宣传单 - 交互式地图的JavaScript库在地图上实现show marker。
I refer to Quick Start Guide - Leaflet - a JavaScript library for interactive maps to implement show marker on the map.
我想显示所有标记的所有弹出窗口,如果我点击地图,它仍会保留弹出窗口。
I want to show all popups of all the markers,and if I click on the map,it still keep the popups.
bottleNeck是
The bottleNeck is
1.如何更改代码以显示标记的多个弹出窗口
1.How to change the code to show multiple popups of the markers
2.如果我点击地图如何保留弹出窗口
2.How to keep the popups if I click on the map
因为我谷歌这个,我找不到解决方案。
任何人都可以帮助我吗?
Because I google this,I can't find the solution. Anybody can help me?
推荐答案
这是Leaflet快速入门教程的修改版本。
它添加了三个带有各自弹出窗口的标记并保持开放状态:
Here's a modified version of Leaflet's quickstart tutorial. It adds three markers with their own, individual popups and keeps the open:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var markers = [
{pos: [51.51, -0.10], popup: "This is the popup for marker #1"},
{pos: [51.50, -0.09], popup: "This is the popup for marker #2"},
{pos: [51.49, -0.08], popup: "This is the popup for marker #3"}];
markers.forEach(function (obj) {
var m = L.marker(obj.pos).addTo(mymap),
p = new L.Popup({ autoClose: false, closeOnClick: false })
.setContent(obj.popup)
.setLatLng(obj.pos);
m.bindPopup(p);
});
关键点是:
- 每个标记需要自己的弹出层
- 弹出层需要配置
autoClose:false
(= >当打开另一个弹出窗口时弹出窗口没有关闭)和closeOnClick:false
(=>单击地图时弹出窗口没有关闭)。
- each marker needs its own popup layer
- the popup layers need to be configured with
autoClose: false
(=> the popup is not closed when another popup is opened) andcloseOnClick: false
(=> the popup is not closed when the map is clicked).
这篇关于宣传单显示所有制作人的所有弹出窗口并保留在地图中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!