1 <!DOCTYPE html>

 2 <html lang="zh">

 3     <head>

 4         <meta charset="UTF-8">

 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">

 7         <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />

 8         <title></title>

 9         <style type="text/css">

10             body {

11                 margin: 0;

12             }

13

14             #mapid {

15                 height: 500px;

16             }

17         </style>

18     </head>

19     <body>

20         <div id="mapid"></div>

21

22         <script type="text/javascript" src="leaflet/leaflet.js"></script>

23

24         <script type="text/javascript">

25             const mymapOptions = {

26                 // 地图中心

27                 center: [50.5, 30.5],

28                 // 地图的最小缩放级别

29                 minZoom: 11,

30                 // 初始化时的缩放等级

31                 zoom: 13,

32                 // 地图的最大缩放级别

33                 maxZoom: 15,

34                 // 强制让地图的缩放级别始终为这个值的倍数

35                 zoomSnap: 1,

36                 // 版权控件添加到地图中（即水印）

37                 attributionControl: false,

38                 // 是否显示zoom 缩放控件,默认是true

39                 zoomControl: true,

40             }

41

42             const mymap = L.map('mapid', mymapOptions);

43

44             const myIcon = L.icon({

45                 iconUrl: './leaflet/images/marker-icon.png.png',

46                 iconSize: [38, 95],

47                 // 图标 "tip" 的坐标（相对于其左上角）。

48                 //图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。

49                 iconAnchor: [22, 94],

50                 // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开

51                 popupAnchor: [-3, -76],

52

53             });

54

55             const markerOptions = {

56                 icon: myIcon,

57                 // 不生效，默认是没有tooltip 提示

58                 title: 'ddddd'

59             }

60

61             const mapMarker = L.marker(markerLatlng).addTo(mymap);

62             // const mapMarker = L.marker([50.5, 30.5]).addTo(mymap); 可以是数组的形式

63

64

65             // 弹窗标记

66             mapMarker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

67         </script>

68

69     </body>

70 </html>

4. Popup 弹出窗口的更多相关文章

  1. 34.qt quick-Popup弹出窗口自定义

    1.Popup介绍 Popup是一个弹出窗口的控件它的常用属性如下所示: anchors.centerIn : Object,用来设置居中在谁窗口中. closePolicy : enumeratio ...

  2. OAF_开发系列08_实现OAF通过Popup参数式弹出窗口（案例）

    20150711 Created By BaoXinjian

  3. Add an Action that Displays a Pop-up Window 添加显示弹出窗口按钮

    In this lesson, you will learn how to create an Action that shows a pop-up window. This type of Acti ...

  4. pentaho cde popup弹出框口

    弹出窗口在pentaho cde里面相对比较容易,不过还是记录一下,以防时间久了,忘记关键参数. 先看一下效果图: 画出自己想要在弹出框展示的图形,把他的HtmlObject设置成弹出窗口,如图: 然 ...

  5. JS弹出窗口代码大全(详细整理)

    1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...

  6. window.open()弹出窗口防止被禁

    window.open(),顾名思义,是指在当前浏览器窗口弹出另一个浏览器窗口. 因为多种原因,浏览对window.open弹出的窗口做了多方限制.限制不同,肯定会造成各浏览器弹出窗口的差异. 大部分 ...

  7. ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件

    原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...

  8. Selenium常用操作汇总二——如何得到弹出窗口

    在selenium 1.X里面得到弹出窗口是一件比较麻烦的事,特别是新开窗口没有id.name的时候.当时还整理了处理了几种方法,详见:http://seleniumcn.cn/read.php?ti ...

  9. 读《深入理解Windows Phone 8.1 UI控件编程》1.4.3 框架的应用示例：自定义弹出窗口有感

    前些天买了园子里林政老师的两本 WP8.1 的书籍.毕竟想要学得深入的话,还是得弄本书跟着前辈走的. 今天读到 1.4.3 节——框架的应用示例:自定义弹出窗口这一小节.总的来说,就是弄一个像 Mes ...

  10. CKFinder 弹出窗口操作并设置回调函数

    CKFinder 弹出窗口操作并设置回调函数 官方例子参考CKFinderJava-2.4.1/ckfinder/_samples/popup.html 写一个与EXT集成的小例子 Ext.defin ...

随机推荐

  1. Docker部署Springboot+Vue项目

    1 docker使用nginx部署vue项目 1.1 打包vue项目 npm run build vue项目路径下会增加一个dist文件夹,里面就是网页文件 1.2 使用docker 拉取nginx ...

  2. Cannot read properties of null (reading ‘insertBefore‘)

    一.报错现象 vue3 + element plus 项目,本地启动时,页面进行所有操作都正常:部署到test环境后,数据驱动DOM变化的操作会导致如下报错. 二.可能原因及解决方案 经过分析出现报错 ...

  3. Blender中服装网格重新拓扑实录

    最近了解到游戏行业服装的一些处理流程.简单来说: 用MD等做衣服的软件,将服装做出来: 导出2种模型:缝合好的服装模型(叫它3d)以及没有变形的平铺板片模型(叫它2d),建议导出单层的,都要带着UV, ...

  4. 处理Android的物理后退按钮

    在文章.聊天.联系.相册四个页面时,用户点击Android 物理键返回,需要直接退出程序.我这里处理很简单,直接使用react-navigation的属性backbehavior就很快的解决了. &l ...

  5. 苹果ios APP怎么打包？推荐这个网站

    众所周知,苹果的应用开发需要基于苹果电脑环境,而我们很多开发者并不具备这样的条件.如果你买一台贵的苹果电脑只是为了发布一个应用,成本太高了! 就算你有苹果电脑,你也可以自己开发一个基于web的IOS应 ...

  6. Python学习笔记（二）变量的使用

    一.变量的定义 把程序运算的中间结果临时存到内存里,以备后面的代码继续调用,这几个名字的学名就叫做"变量" 可以把变量看做保存信息的容器,它们的目的是在内存中标注和存储数据,然后可 ...

  7. 转载-GNSS缩写

    GNSS常用的缩略语汇总,可能不全,但会不断丰富,欢迎各位批评指正!! 1|01.大表格 缩略语 全称 中文 ADOP ambiguity dilution of precision 模糊度精度因子 ...

  8. EhLib 9安装

    EhLib 9安装 安装EhLib: 在Installer文件夹里找到EhLibInstaller.exe,右键以管理员权限运行EhLibInstaller.exe. 按照提示一路安装下来,顺利完成. ...

  9. 关闭win10“快速启动”功能

    windows正常运行时间的统计问题 windows任务管理器中,在性能选项卡中可以查看系统的运行时间(开机时间) 正常情况下,如果电脑关机,那么再次开机后,该时间会被重置 但是,如果电脑处于上面所说 ...

  10. Unity打开两个同样的工程,使用mklink.bat来进行同步

    操作步骤 假设存在一个项目xProject: 1.在xProject的同级目录中建立一个文件夹,命名为xProjectCopy 2.在xProject的同级目录中建立一个bat文件,命名为mklink ...