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. Software_programming_tools_IDEA

    13:45:55 key promtoer 快捷键提示插件

  2. 错误 : 资产文件&ldquo;\obj\project.assets.json&rdquo;没有&ldquo;.NETCoreApp,Version=v2.0&rdquo;的目标。确保已运行还原,且&ldquo;netcoreapp2.0&rdquo;已包含在项目的 TargetFrameworks 中。

    原因是项目升级了目标框架netcoreapp2.1但是发布配置文件上的目标框架配置项没有更改导致发布错误 将此处修改成需要的版本即可.例如:<TargetFramework>netcore ...

  3. 《Toward Fast, Flexible, and Robust Low-Light Image Enhancement》

    1.(23条消息) 图像增强评价标准EME和matlab代码_eme指标_zhonglingyuxiuYYX的博客-CSDN博客 2.nn.moduleList 3.LOE:lightness ord ...

  4. 导出PDF 空白赋值备份

    后台代码 //出货清单 @RequestMapping(params="getBusinessOutDetail") public void getBusinessOutDetai ...

  5. React 使用链表遍历组件树

    React 为在有限的资源情况下,更好地控制UI的更新,提出了时间分片的概念.以达到三个目标: performing non-blocking rendering(无阻塞渲染):applying up ...

  6. ElasticSearch (Es) 分组查询 记录

    首先表对应的实体类型: public class bm_info{ /// <summary> /// 单位 /// </summary> public  string sou ...

  7. nginx 可视化配置平台

    nginx是一个高性能的HTTP和反向代理服务器.在部署项目中,经常会用到,但是配置是比较麻烦的,很容易出错,今天大叔给大家推荐一个非常好用的可视化平台 -- nginx-gui. 项目功能 配置管理 ...

  8. 安装kubernetes dashboard以及用户授权

    kubernetes 版本v1.25.3 1.安装 版本查看:https://github.com/kubernetes/dashboard/releases kubectl apply -f htt ...

  9. Chart控件-常用设置

    visual studio中原生控件chart控件使用时的一些常用设置 鼠标缩放功能 缩放后恢复曲线

  10. 用JMeter对MySQL数据库进行压测

    转载链接:https://www.cnblogs.com/Jadie/p/8056541.html 参考链接:https://blog.csdn.net/qq_35389417/article/det ...