代码示例：

<!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. 小程序循环多个picker选择器，实现动态增、减

    现象 循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变: 问题 怎样操作才能实现只改变当前操作的下拉框的值? 思路 在js中设置一个数组变量,存储每个picker选择器默认的值:然后 ...

  2. RESTful接口规范

    一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...

  3. mysql命令行导入结构化数据

    数据样本 103252765-|--|-stephanie_mt@hotmail.com-|-o/35+nGaNEU=-|-ion|-- 其中|为分隔符,每行的换行符\n mysql -uroot M ...

  4. threejs指定对象旋转中心

    指定对象旋转中心 默认情况下,对象的旋转中心都是自身的中心.对于组对象而言,也是如此.因此,可以利用这个特点,实现对象绕任何点旋转,也就是指定旋转中心.比如我们想要下图的对象绕A点旋转  我们可以添加 ...

  5. c#tcp源端口号和目的端口怎么理解

    在一台机器上,一个进程对应一个端口.端口的作用就是用来唯一标识这个进程.源端口标识发起通信的那个进程,目的端口标识接受通信的那个进程.有了端口号,接受到报文后才能够知道将报文发送到哪个进程.

  6. poj_1979(dfs)

    Red and Black There is a rectangular room, covered with square tiles. Each tile is colored either re ...

  7. Android.Tools.Eclipse hangs at the Android SDK Content Loader

    Eclipse hangs at the Android SDK Content Loader http://stackoverflow.com/questions/13489141/eclipse- ...

  8. Jackson高并发情况下，产生阻塞

    情况:在高并发情况下,查看线程栈信息,有大量的线程BLOCKED. 从线程栈得知,线程栈中出现了阻塞,锁在了com.fasterxml.jackson.databind.ser.SerializerC ...

  9. JSP 9个内置对象

    JSP内置对象(隐式对象)是JSP容器为每个页面自动实例化的一组对象,开发者可直接使用,也被称为预定义变量. JSP容器提供了9个内置对象 request // javax.servlet.http. ...

  10. spring.boot mybaits集成

    https://www.cnblogs.com/pejsidney/p/9272562.html (insertBatch批量插入) 第一篇博客循环部分有错误,参照下面的例子去更改 List<S ...