代码示例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        #mapDiv {

            /*必须指定高度*/

            height: 900px;

        }

    </style>

    <!--leaflet样式文件-->

    <link rel="stylesheet" href="./js/lib/leaflet/leaflet.css" />

    <!--leaflet核心JS文件-->

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

    <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="mapDiv">

    </div>

    <!--脚本必须放在尾部-->

    <script>

        var map = L.map('mapDiv').setView([51.505, -0.09], 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

            attribution: '&copy; <a href="http://osm.org/copyright">中科院数字与遥感研究所</a> contributors'

        }).addTo(map);

        var marker = L.marker([51.508, -0.09]).addTo(map);

        var circle = L.circle([51.508, -0.11], {

            color: 'red',

            fillColor: '#f03',

            fillOpacity: 0.5,

            radius: 500

        }).addTo(map);

        circle.bindPopup("I am a circle.");

        var polygon = L.polygon([

    [51.509, -0.08],

    [51.503, -0.06],

    [51.51, -0.047]

        ]).addTo(map);

        var popup = L.popup();

        function onMapClick(e) {

            popup

                .setLatLng(e.latlng)

                .setContent("You clicked the map at " + e.latlng.toString())

                .openOn(map);

        }

        map.on('click', onMapClick);

    </script>

</body>

</html>

leaflet入门（一）示例的更多相关文章

  1. Leaflet入门：添加点线面并导入GeoJSON数据|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

    Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...

  2. Spring MVC 入门教程示例 （一）

    今天和大家分享下  Spring MVC  入门教程 首先还是从 HelloWorld  web 工程开始 -------------------------- 1.首先创建一个Maven Web工程 ...

  3. wxPython 入门开发示例

    1.背景资料 wxPython API:https://www.wxpython.org/Phoenix/docs/html/ 2.入门示例 wxPython最重要的两个概念:App与Frame,其中 ...

  4. leaflet入门（五）API翻译（下）

    L.PointConstructor(函数构造器)Properties(属性)Methods(方法) L.BoundsConstructor(函数构造器)Properties(属性)Methods(方 ...

  5. leaflet入门（四）API翻译（上）

    L.Map L.Marker L.Popup L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div元素和带有地图选项的描述的文字对象来实 ...

  6. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  7. 复杂事件处理——Esper入门（示例程序）

    前面对Esper Quick Start & Tutorial进行了简单描述,希望各位看官能够大致了解what is Esper,甚至对how to work有朦朦胧胧的了解. 开发一个Esp ...

  8. Arduino 入门程序示例之直流电机（2015-06-15）

    概述 演示直流电机的控制. 示例程序 PWM控制直流电机 略过控制电机转停的示例啦,有需要就把这里的 PWM 换成数字口输出 HIGH 或 LOW 就行了. // ------------------ ...

  9. Arduino 入门程序示例之一片 LED(2015-06-11)

    概述 从点到线,从线到面.现在开始要来一片的 LED 了,一大波的 LED 正在到来! 示例程序 因为手头没有现成的模块,手头只有 595,所以这里每一个示例程序都是使用 74HC595 扩展 IO ...

随机推荐

  1. MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring

    Mybatis在与Spring集成的时候可以配置 MapperFactoryBean来生成Mapper接口的代理. 例如 <bean id="userMapper" clas ...

  2. make ；makefile； cmake； qmake的区分

    1. make 是用来执行Makefile的.2. Makefile是类unix环境下(比如Linux)的类似于批处理的"脚本"文件.其基本语法是: 目标+依赖+命令,只有在目标文 ...

  3. eclipse导入项目以后，内容没有错误，项目上却有个小红叉？

    对于上面的错误,应该如何解决?

  4. input 原生上传文件（type = file）

    1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...

  5. DOM-动态操作心得

    这个知识点都是之前看过的,就当是复习了 一.创建元素的三种方法 第一种:  document.write() 识别标签 但会覆盖之前内容 第二种:  用元素自身的innerHTML方法 不识别标签 但 ...

  6. win10上VMare安装Centos7并使用Xshell连接Centos

      一.CentOS 使用VMware虚拟机如何上网 1.宿主机的虚拟网关VMnet8的IP设置为自动获取. (1)打开控制面板:“控制面板” ---> “网络和 Internet” ---&g ...

  7. Linux惊群效应详解

    Linux惊群效应详解(最详细的了吧)   linux惊群效应 详细的介绍什么是惊群,惊群在线程和进程中的具体表现,惊群的系统消耗和惊群的处理方法. 1.惊群效应是什么?        惊群效应也有人 ...

  8. VisualStudio使用技巧

    控制台工程去除黑框 刚学习OpenGL,绘制图形的时候,如果不进行设置,运行的时候会先出现黑窗口再出现Windows窗口.其实要去除控制台窗口非常简单,只需要修改工程设置,把子系统改成Windows, ...

  9. 最详细的Axure动态面板使用教程

    1.打开[Axure]软件,在index文件上新建一个375*667大小的背景矩形并绘制页面. 具体如图所示. 2.在banner的位置上新建一个[动态面板],双击动态面板在其中新建state1.st ...

  10. netstat 查看端口命令

    查看特定端口是否启动 netstat -lnp |