<!DOCTYPE html>

<html>

<head>

    <title>Layers Control Tutorial - Leaflet</title>

    <meta charset="utf-8" />

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

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

    <style>

        html, body {

            height: 100%;

            margin: 0;

        }

        #map {

            width: 1000px;

            height: 700px;

        }

    </style>

</head>

<body>

<div id='map'></div>

<script>

    var grayscaleLayer= L.tileLayer('http://124.163.214.106:18065/arcgis/rest/services/shenjie_bg/MapServer/tile/{z}/{y}/{x}',

        {id: 'map11'});

    var map = L.map('map', {

        minZoom: 5,

        maxZoom: 12,

        center: [39.73, -104.99],

        zoom: 8,

        zoomDelta: 0.5,//点击+-按钮的放缩刻度尺度，默认值1

        zoomSnap: 0.5,//地图能放缩的zoom的最小刻度尺度，默认值1

        fullscreenControl: false,//全屏控件，不显示

        zoomControl: false,//放大缩小控件，不显示

        attributionControl: false//右下角属性控件，不显示

    });

    map.addLayer(grayscaleLayer);

    var markers=[];

    //系统默认的marker,有一个蓝色图标

    var marker1 =L.marker([39.61, -107.02]);

    //自定义的circleMarker

    var marker2 = L.circleMarker([39.61, -106.02], {

        stroke: true,

        color: '#aaaaaa',

        weight: 1,

        opacity: 1,

        fillColor: '#00e400',

        fillOpacity: 1,

        radius: 10

    });

    //用html的div来创建icon，但是有缺陷

    var icon3 = L.divIcon({

        html: "<div style='width: 15px;height:15px;border-radius: 50%;background-color:#00e400 ;'></div>",

        iconAnchor: [1, 1]});

    var marker3 =L.marker([39.61, -105.02], { icon: icon3 });

    //用html的div的样式来创建marker的icon，注意需要加className属性，否则会出现marker1的问题

    var icon4 = L.divIcon({

        html: "<div style='width:24px;height:24px;border-radius:4px;background-color:#00e400 ;'></div>",

        className: 'ss',});

    var marker4 =L.marker([39.61, -104.02], { icon: icon4 });

    markers.push(marker1);

    markers.push(marker2);

    markers.push(marker3);

    markers.push(marker4);

    var citiesLayer = L.layerGroup(markers);

    map.addLayer(citiesLayer);

</script>

</body>

</html>

注意mark清理和切换的方法如下：

if (this.graphicLayer)
{
  if (map.hasLayer(this.graphicLayer))
  {
    map.removeLayer(this.graphicLayer);
  }
}

leaflet 在地图上创建marker标记的更多相关文章

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

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

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

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

  3. leaflet在地图上加载本地图片

    <link href="~/Scripts/Leaflet/leaflet.css" rel="stylesheet" /><script s ...

  4. c# 进行AE开发时，如何在地图上定位出一个点

    一.文本形式的气泡提示框 由于本人是初学,所以具体的含义尚未弄清楚,直接给出代码吧!

  5. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  6. 在地图上添加POI

    使用Tangram的Marker, 可以在地图上做各种标记, 效果图: Tangram是通过Marker在地图上添加标记的,Marker分Point, Polyline和Polygon三种, 分别对应 ...

  7. Android集成高德地图如何自定义marker

    高德地图自定义Marker 高德地图默认的marker样式是这种 一般的修改样式是通过icon接口来调整 MarkerOptions markerOptions = new MarkerOptions ...

  8. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  9. Swift - 使用MapKit显示地图，并在地图上做标记

    通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...

  10. leaflet 利用ajax 将前端地图上的数据post到后台

    生成Google地图,在地图上单击后,将该点的经纬度反馈给后台. 前端HTML代码: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. 本周二晚19：00战码先锋第5期直播丨深入理解OpenHarmony系统启动，轻松踏上设备软件开发之旅

    OpenAtom OpenHarmony(以下简称"OpenHarmony")工作委员会首度发起「OpenHarmony开源贡献者计划」,旨在鼓励开发者参与OpenHarmony开 ...

  2. Git 13 暂存代码

    如果当前分支的功能还没开发完,无法提交代码. 但出现了紧急情况(比如线上BUG),需要立即切换到其他分支进行开发. 此时可以先暂存当前分支代码,等切换回当前分支的时候再恢复. 1.暂存当前分支变更: ...

  3. 知识图谱增强的KG-RAG框架

    昨天我们聊到KG在RAG中如何发挥作用,今天我们来看一个具体的例子. 我们找到一篇论文: https://arxiv.org/abs/2311.17330 ,论文的研究人员开发了一种名为知识图谱增强的 ...

  4. LTV预估的一些思考

    什么是LTV 用户生命周期价值(Lifetime Value, LTV)是一个非常重要的指标,定义为单个用户在某种生命周期内(i.e. 从开始使用产品到停止使用期间) 为产品创造的总价值. 比如GMV ...

  5. 如何在macOS上安装Python3并设置本地编程环境

    介绍 Python是一种多功能编程语言,可用于许多不同的编程项目.1991年首次出版,其名称灵感来自英国喜剧组织Monty Python,开发团队希望使Python成为一种有趣的语言.易于设置,并以相 ...

  6. CentOS编译安装Nginx1.5.2+PHP5.5.1+ MySQL 5.6.10

    CentOS编译安装Nginx1.5.2+PHP5.5.1+ MySQL 5.6.10 时间:2013-11-15 23:39 来源:blog.s135.com  作者:张宴的博客  举报  点击:1 ...

  7. ython 并不合适职场编程，SPL 才行

    职场人员使用 Excel 进行数据处理已经成为家常便饭.不过相信大家一定有过很无助的情况,比如复杂计算.重复计算.自动处理等,再遇上个死机没保存,整个人崩溃掉也不是完全不可能. 如果学会了程序语言,这 ...

  8. ImageJ使用教程（一）：开始使用

    目录 简介 界面介绍 Edit->Options 开始使用 打开图片 放大拖拽 图片信息 色彩分析 保存图片 总结 参考文章 ImageJ软件 简介 ImageJ是一个基于java的公共的图像处 ...

  9. 微信小程序三种授权登录的方式

    经过一段时间对微信小程序的研发后 总结出以下三种授权登录的方式,我给他们命名为'一次性授权''永久授权''不授权' 1.一次性授权常规写法,需要获取用户公开信息(头像,昵称等)时,判断调取授权登录接口 ...

  10. javascript现代编程系列教程之五——正零和负零

    在JavaScript中,正零(+0)和负零(-0)都代表数值0,它们在大多数情况下是等价的.然而,在某些特定的场景下,正零和负零的行为会有所不同. 除法操作:当0被用作除数时,正零和负零会产生不同的 ...