宣传单显示所有制作人的所有弹出窗口并保留在地图中 [英] Leaflet show all popups of all the makers and keep in the map

查看:99
本文介绍了宣传单显示所有制作人的所有弹出窗口并保留在地图中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我指的是快速入门指南 - 宣传单 - 交互式地图的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 &copy; <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) and closeOnClick: false (=> the popup is not closed when the map is clicked).

这篇关于宣传单显示所有制作人的所有弹出窗口并保留在地图中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆