9.增加Marker 标记
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 标记的更多相关文章
- SVG.js Marker标记和自定义标签
一.SVG.Marker 添加标记 SVG.Marker 标记可以被添加到一个线,折线的各点,多边形和路径.有三种类型的标记:开始,中间和结束.如果开始表示第一个点,则结束中间的最后一点和中间点. v ...
- ZBrush软件特性之Marker标记调控板
在ZBrush®中使用Marker标记调控板来记忆物体属性,因此能在任何时间回到标记并使用它给其他物体或改变物体作为参考点. ZBrush软件下载:http://pan.baidu.com/s/1sl ...
- Google Map API Version3 ：代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...
- GIS（一）——在js版搜索地图上加入Marker标记
因为我们做的是有关于旅游方面的项目,所以涉及到了地图功能.我接到的当中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记. 我们项目用的是搜狗地图.使用的是js版本号.大家有兴趣的话,能够參 ...
- matplotlib 学习笔记02：marker标记详解
本文内容来自于matplotlib官网:matplotlib官网markers资料 This module contains functions to handle markers. Used by ...
- javascript 百度地图无秘钥（appkey）创建marker标记地图
创建简单的marker地图不一定需要去百度地图申请key,简单代码实现marker地图,效果如图: html代码如下,代码中的baidu.api.js参考后面的隐藏代码: <!DOCTYPE h ...
- IOS中为tableViewCell增加右侧标记（选中或者更多）
if ([self.selectWys containsObject:[self.initCitys objectAtIndex:indexPath.row]]) { tvCell.accessory ...
- GoogleMap增加标记和路线轨迹的方法
声明:本文基于JavaScript环境编写. 前言 按照目前的项目需求,我们需要在谷歌地图上标记出当前仓库的位置.司机补货的行车路径.司机当前班次需要补货的机器的位置,同时根据补货状态的不同标记成不同 ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 线段树初步&&lazy标记
线段树 一.概述: 线段树是一种二叉搜索树,与区间树相似,它将一个区间划分成一些单元区间,每个单元区间对应线段树中的一个叶结点. 对于线段树中的每一个非叶子节点[a,b],它的左儿子表示的区间为[a, ...
随机推荐
- Flutter异常监控 - 壹 | 从Zone说起
开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情 如果你正需要处理Flutter异常捕获,那么恭喜你,找对地了,这里从根源上给你准备了Flutter异常捕获 ...
- MSIC总结取证分析——日志分析
MSIC总结取证分析 一.日志分析: 1．常见日志分析类型: 2．常见一些考点: (1)还原特定IP攻击手段(SQL注入.暴力破解.命令执行等),或还原最初攻击时间: (2)寻找flag或者特定文件解 ...
- [Untiy]贪吃蛇大作战（三）——商店界面
游戏商店界面: 实际的效果图如下: 要实现这个滑动,首先我们需要,一个内容显示区域,一个内容滚动区域,如下图: 其中ItemContent挂载的组件如下: 红框标注的地方是右方的滑动块. 然后Item ...
- 线段树套线性基——题解P4839 P哥的桶
文章历史 2022-08-03: 文章初稿,由于对算法介绍过于少而被管理员打回重造. 2020-08-06:将算法介绍进行扩写,并删除了一些可有可无的内容或玩梗内容. 管理员审核题解辛苦了. 简要题意 ...
- 统一返回对象封装和统一异常捕获封装springboot starter
好久没有更新文章了,高龄开发没什么技术,去了外包公司后没怎么更新文章了.今天分享下统一处理starter,相信开发web系统的时候都是会涉及到前后端的交互,而后端返回数据的时候一般都会统一封装一个返回 ...
- strapi系列--如何自定义非界面化的接口，定制化自己的业务逻辑
为什么要进行后端定制呢? 在实际开发过程中,项目中有些需求是不需要创建界面化接口的,需要我们定制化自己的业务逻辑,那么我们该如何处理这个需求呢?本文以图文并茂的形式,定制一个我们自己的业务逻辑接口. ...
- three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案三版本~~
先上图对比方案1-2-3不同点,本文是方案3 方案1(旋转场景情况下发光体不应该遮住另一个,但是遮住了) 方案2(层次正常,发光正常) 方案3(层次正常,发光正常,但是转动场景时候部分辉光会被遮挡,但 ...
- Array list练习
Array list练习 数据添加到集合 生成6个1~33之间的随机整数,添加到集合,并遍历 public class Test01ArrayList { public static void mai ...
- 【分析笔记】全志 i2c-sunxi.c 控制器驱动分析
分析平台:全志 A64 内核版本:Linux 4.9 数据手册:Allwinner_A64_User_Manual_V1.1.pdf (whycan.com) 驱动框架 I2C 设备驱动 作为方案应用 ...
- 《深入理解Java虚拟机》第三章读书笔记（三）——经典垃圾回收器
系列文章目录和关于我 一丶概述 上图展示了 经典的垃圾回收器,其中Serial,ParNew,Parallel Scavenge(途中的Parallel) 作用在新生代Serial Old CMS,P ...