代码示例：

<!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. delete，truncate 和 delete之间的区别

    1.首先看下语法定义: drop table_name truncate table_name delete table_name [where column_name = value] 2.各个删除 ...

  2. C#中泛型的解释（object,list,var,dynamic的区别）

    泛型是 2.0 版 C# 语言和公共语言运行库 (CLR) 中的一个新功能.泛型将类型参数的概念引入 .NET Framework,类型参数使得设计如下类和方法成为可能:这些类和方法将一个或多个类型的 ...

  3. .netcore webapi iis 虚拟目录下载apk文件

    首先贴上微软的文档:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files 参考网址:http://www.cnb ...

  4. 基于Confluent.Kafka实现的KafkaConsumer消费者类和KafkaProducer消息生产者类型

    一.引言 研究Kafka有一段时间了,略有心得,基于此自己就写了一个Kafka的消费者的类和Kafka消息生产者的类,进行了单元测试和生产环境的测试,还是挺可靠的. 二.源码 话不多说,直接上代码,代 ...

  5. docker从私有镜像库pull/push镜像问题：Error response from daemon: Get https://xxxx.com/: x509: certificate signed by unknown authority

    docker从私有镜像库pull/push镜像问题:Error response from daemon: Get https://harbor.op.xxxx.com/v2/: x509: cert ...

  6. Windows下的PHP 5.3.x安装 Zend Guard Loader

    PHP5.3之后不再使用Zend Optimizer而是由Zend Guard Loader替换,而Zend Guard Loader安装比前者方便了很多,只有一个dll: 址:http://down ...

  7. MySQL学习笔记-大纲

    软件程序性能测试在之前<品味性能之道>系列中已经大量提到,讲解了很多测试方法.测试观念.测试思想等等.最近准备深入MySQL进行学习并总结.分别查阅<MySQL性能调优与架构设计&g ...

  8. NC 5的开发环境起不了客户端

    5的开发环境,中间件启动无异常,但是在起客户端时报错,连中间件也关闭了. 添加图中两个jdk下的包

  9. ui设计教程分享：关于Logo设计要素

      1. 视觉上”一语双关 我最喜欢的一些Logo在视觉设计上”一语双关”,将两张图片.两张意象巧妙结合,合二为一. WinePlace 的Logo就是一个绝佳的案例 这个Logo看起来像图钉,暗喻着 ...

  10. UI设计初学者必备的工具以及学习路线（附思维导图）

    今天千锋UI设计小编着重为大家介绍5个学习ui设计必须要会的工具和软件以及UI设计学习路线,希望能对大家所帮助. UI设计必要的工具和软件 1.PS 图像处理合成软件 ui设计核心软件,强大的图像处理 ...