热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

宣传单显示所有制作人的所有弹出窗口并保留在地图中

如何解决《宣传单显示所有制作人的所有弹出窗口并保留在地图中》经验,为你挑选了1个好方法。

我参考快速入门指南 - Leaflet - 用于交互式地图的Javascript库,以在地图上实现show marker.

我想显示所有标记的所有弹出窗口,如果我点击地图,它仍然保留弹出窗口.

瓶子是

1.如何更改代码以显示标记的多个弹出窗口

2.如果点击地图,如何保留弹出窗口

因为我谷歌这个,我找不到解决方案.有人可以帮帮我吗?



1> 小智..:

这是Leaflet快速入门教程的修改版本.它添加了三个带有各自弹出窗口的标记并保持打开状态:

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 © OpenStreetMap contributors, ' +
        'CC-BY-SA, ' +
        'Imagery © Mapbox',
    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(=>单击地图时弹出窗口未关闭).


推荐阅读
author-avatar
前所未闻啊_549
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有