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             html,body {

14                 height: 100%;

15             }

16

17             #mapid {

18                 height: 500px;

19             }

20         </style>

21     </head>

22     <body>

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

24

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

26

27         <script type="text/javascript">

28         const {dir} = console;

29             const mymapOptions = {

30                 // 地图中心

31                 center: [50.5, 30.5],

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

33                 minZoom: 12,

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

35                 zoom: 13,

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

37                 maxZoom: 14,

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

39                 zoomSnap: 1,

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

41                 attributionControl: false,

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

43                 zoomControl: true,

44             }

45

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

47             dir('getBounds()', mymap.getBounds())

48

49

50

51

52

53             const imageUrl = './leaflet/images/b1-floor1-full-h.png';

54             const imageBounds = [

55                 [50.52728768645296, 30.62301635742188],

56                 [50.472692651662115, 30.376853942871097]

57             ];

58

59             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

60

61             // 监听事件

62             mymap.on('click', (e) => {

63                 console.log('e', e)

64

65                 const myIcon = L.icon({

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

67                     iconSize: [38, 95],

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

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

70                     iconAnchor: [22, 94],

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

72                     popupAnchor: [-3, -76],

73

74                 });

75

76                 const markerOptions = {

77                     icon: myIcon,

78                 }

79

80

81                 const markerLatlng = L.latLng(e.latlng);

82

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

84             })

85

86         </script>

87

88     </body>

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. Go语言与其他高级语言的区别

    概述: go语言与其他语言相比,go语言的关键字非常少,只有25个,c语言有37个,c++有84个,python有33个,java有53个. 差异1:go语言不允许隐式转换,别名和原有类型也不能进行隐 ...

  2. sqli-laba靶场搭建

    windows下安装sqli-laba 环境:windows10 安装phpstudy 1.下载并安装小皮面板phpstudy(傻瓜式安装) https://www.xp.cn/windows-pan ...

  3. C++指针【cherno课程学习】

    定义: 指针是一个整数,一种存储内存地址的数字 内存就像一条线性的线,在这条街上的每一个房子都有一个号码和地址 类似比喻成电脑,这条街上每一个房子的地址 是一个字节 我们需要能够准确找到这些地址的方法 ...

  4. day05-Vue02

    Vue02 7.修饰符 7.1基本说明 修饰符(Modifiers)是以.指明的后缀,指出某个指令以特殊方式绑定 官方文档:修饰符 Vue中的修饰符有: 事件修饰符 按键修饰符 系统修饰符 事件修饰符 ...

  5. SpringBoot 项目中配置多个 Jackson 的 ObjectMapper ，以及配置遇到的坑

    目录 问题说明 原因排查分析 结论总结 Jackson 自动装配分析 问题说明 我们都知道,SpringBoot 项目中,如果引入了 Jackson 的包,哪怕不配置,SpringBoot 也会帮我们 ...

  6. angular父子组件传值，子组件传值给父组件，父组件又传值给子组件

  7. 路由分发、名称空间、视图层之必会的三板斧、JsonResponse对象、request获取文件、FBV与CBV、模板层语法传值

    路由分发.名称空间.视图层之必会的三板斧.JsonResponse对象.request获取文件.FBV与CBV.模板层语法传值 一.昨日内容回顾 二.路由分发 1.djiango的每个应用都有主见的t ...

  8. 音频编辑服务UI SDK接入指导及常见问题

    华为 HMS Core 音频编辑服务(Audio Editor Kit)是华为帮助全球开发者快速构建各类应用音频能力的服务,汇聚了华为在音乐.语音等相关音频领域的先进技术.音频编辑服务为开发者们提供音 ...

  9. 【分析笔记】NXP PCF85263 设备驱动分析笔记

    驱动移植 供应商无法提供相应的驱动程序,不过在 linux 最新的内核倒是有一份 pcf85363 的驱动,看代码并核对寄存器功能,是可以兼容 pcf85263 芯片.只是我们用的内核比较老 linu ...

  10. gitlabApi如何获取项目文件夹的commitId

      在我们做配置管理系统和gitlab系统集成的时候,有一个常见的场景,就是要获取某个文件的commitId,来记录本次配置文件提交的版本.这个通过gitlabApi很容易实现: GET /proje ...