1.  1 <!DOCTYPE html>
  2.  2 <html lang="zh">
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  6         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  7         <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
  8.  8         <title></title>
  9.  9         <style type="text/css">
  10. 10             body {
  11. 11                 margin: 0;
  12. 12             }
  13. 13             html,body {
  14. 14                 height: 100%;
  15. 15             }
  16. 16
  17. 17             #mapid {
  18. 18                 height: 500px;
  19. 19             }
  20. 20         </style>
  21. 21     </head>
  22. 22     <body>
  23. 23         <div id="mapid"></div>
  24. 24
  25. 25         <script type="text/javascript" src="leaflet/leaflet.js"></script>
  26. 26
  27. 27         <script type="text/javascript">
  28. 28         const {dir} = console;
  29. 29             const mymapOptions = {
  30. 30                 // 地图中心
  31. 31                 center: [50.5, 30.5],
  32. 32                 // 地图的最小缩放级别
  33. 33                 minZoom: 12,
  34. 34                 // 初始化时的缩放等级
  35. 35                 zoom: 13,
  36. 36                 // 地图的最大缩放级别
  37. 37                 maxZoom: 14,
  38. 38                 // 强制让地图的缩放级别始终为这个值的倍数
  39. 39                 zoomSnap: 1,
  40. 40                 // 版权控件添加到地图中（即水印）
  41. 41                 attributionControl: false,
  42. 42                 // 是否显示zoom 缩放控件,默认是true
  43. 43                 zoomControl: true,
  44. 44             }
  45. 45
  46. 46             const mymap = L.map('mapid', mymapOptions);
  47. 47             dir('getBounds()', mymap.getBounds())
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53             const imageUrl = './leaflet/images/b1-floor1-full-h.png';
  54. 54             const imageBounds = [
  55. 55                 [50.52728768645296, 30.62301635742188],
  56. 56                 [50.472692651662115, 30.376853942871097]
  57. 57             ];
  58. 58
  59. 59             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);
  60. 60
  61. 61             // 监听事件
  62. 62             mymap.on('click', (e) => {
  63. 63                 console.log('e', e)
  64. 64
  65. 65                 const myIcon = L.icon({
  66. 66                     iconUrl: './leaflet/images/marker-icon.png.png',
  67. 67                     iconSize: [38, 95],
  68. 68                     // 图标 "tip" 的坐标（相对于其左上角）。
  69. 69                     //图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
  70. 70                     iconAnchor: [22, 94],
  71. 71                     // 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开
  72. 72                     popupAnchor: [-3, -76],
  73. 73
  74. 74                 });
  75. 75
  76. 76                 const markerOptions = {
  77. 77                     icon: myIcon,
  78. 78                 }
  79. 79
  80. 80
  81. 81                 const markerLatlng = L.latLng(e.latlng);
  82. 82
  83. 83                 const mapMarker = L.marker(markerLatlng).addTo(mymap);
  84. 84             })
  85. 85
  86. 86         </script>
  87. 87
  88. 88     </body>
  89. 89 </html>

9.增加Marker 标记的更多相关文章

  1. SVG.js Marker标记和自定义标签

    一.SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线,折线的各点,多边形和路径.有三种类型的标记:开始,中间和结束.如果开始表示第一个点,则结束中间的最后一点和中间点. v ...

  2. ZBrush软件特性之Marker标记调控板

    在ZBrush®中使用Marker标记调控板来记忆物体属性,因此能在任何时间回到标记并使用它给其他物体或改变物体作为参考点. ZBrush软件下载:http://pan.baidu.com/s/1sl ...

  3. Google Map API Version3 ：代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  4. GIS（一）——在js版搜索地图上加入Marker标记

    因为我们做的是有关于旅游方面的项目,所以涉及到了地图功能.我接到的当中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记. 我们项目用的是搜狗地图.使用的是js版本号.大家有兴趣的话,能够參 ...

  5. matplotlib 学习笔记02：marker标记详解

    本文内容来自于matplotlib官网:matplotlib官网markers资料 This module contains functions to handle markers. Used by ...

  6. javascript 百度地图无秘钥（appkey）创建marker标记地图

    创建简单的marker地图不一定需要去百度地图申请key,简单代码实现marker地图,效果如图: html代码如下,代码中的baidu.api.js参考后面的隐藏代码: <!DOCTYPE h ...

  7. IOS中为tableViewCell增加右侧标记（选中或者更多）

    if ([self.selectWys containsObject:[self.initCitys objectAtIndex:indexPath.row]]) { tvCell.accessory ...

  8. GoogleMap增加标记和路线轨迹的方法

    声明:本文基于JavaScript环境编写. 前言 按照目前的项目需求,我们需要在谷歌地图上标记出当前仓库的位置.司机补货的行车路径.司机当前班次需要补货的机器的位置,同时根据补货状态的不同标记成不同 ...

  9. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  10. 线段树初步&&lazy标记

    线段树 一.概述: 线段树是一种二叉搜索树,与区间树相似,它将一个区间划分成一些单元区间,每个单元区间对应线段树中的一个叶结点. 对于线段树中的每一个非叶子节点[a,b],它的左儿子表示的区间为[a, ...

随机推荐

  1. Django之ORM表高级操作、增删改查、外键字段连表查、单表查、跨表查、F/Q查询

    目录 一.如何开启自己的测试脚本? 二.对表数据的添加.更新.删除 1.create() 变态操作之批量插入数据 2.update() 3.delete() 4.如何查看QuerySet对象执行的sq ...

  2. [深度学习] ncnn安装和调用基础教程

    目录 1 介绍 2 Ubuntu 18下ncnn安装和使用 2.1 Ubuntu 18下ncnn编译安装 2.2 Ubuntu 18下ncnn使用 3 Windows 10下ncnn安装和使用 3.1 ...

  3. CLISP学习(二)

    它是一门函数式语言,你要用函数的思维来思考. 只不过与数学的表达不同的是,数学里的函数是在括号外  f(x) ,而lisp是在括号内,以列表的形式(f x), cos(x) --> (cos x ...

  4. [LeetCode]爬楼梯

    题目 假设你正在爬楼梯.需要 n 步你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: ...

  5. 【实战】yolov8 tensorrt模型加速部署

    [实战]yolov8 tensorrt模型加速部署 TensorRT-Alpha基于tensorrt+cuda c++实现模型end2end的gpu加速,支持win10.linux,在2023年已经更 ...

  6. Z-Blog后台getshell

    Z-Blog后台getshell 本人所有文章均为技术分享,均用于防御为目的的记录,所有操作均在实验环境下进行,请勿用于其他用途,否则后果自负. 0x00 环境部署 文件下载地址 打开phpstudy ...

  7. 电脑微信小程序抓包

    电脑微信小程序抓包 在渗透的过程中,对于网站找不出什么漏洞的时候我们就可以,对目标进行小程序和公众号漏洞的发掘 0x01 设置微信代理使用Burp抓取数据包 发现我们抓取的数据包很多都是乱码 Prox ...

  8. 程序员大杀器？带你玩转ChatGPT

    作者:京东零售 栗鸿宇 ChatGPT简介 ChatGPT是一款基于AI技术的机器人对话软件,它能够与用户进行智能化的聊天对话,帮助用户解决日常生活中的问题,为用户提供丰富的信息和服务.它集成了海量知 ...

  9. Python中的枚举类enum

    0. 本文来历 上一篇文章,我写了Pytest插件pytest-order指定用例顺序 我当时就比较好奇它的顺序和英文的对应关系,肯定是写死的,找了下就发现在源码sorter.py中定义了一个dict ...

  10. 嵌入式Linux—Framebuffer应用编程

    Framebuffer 应用编程 Frame的意思是帧,buffer的意思是缓冲区.Framebuffer就是一块内存(硬件设备),里面保存着一帧图像. ioctl()函数解析 ioctl()函数非常 ...