代码示例：

<!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. 弹框alertView

    // 创建一个弹框UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@“标题” message:@“显示的具体内容” delegate:s ...

  2. golang xml和json的解析与生成

    golang中解析xml时我们通常会创建与之对应的结构体,一层层嵌套,完成复杂的xml解析. package main; import ( "encoding/xml" " ...

  3. rbac集成 权限分配。之角色管理

    权限分配功能拆分: a. 角色管理 b. 用户管理 c. 菜单和权限的管理 d. 批量的权限操作 e. 分配权限 先实现 角色管理: 无非也就是,增删改查: 定义路由, 编写视图. 1.查看角色页面: ...

  4. 关于js动画简单理解；

    1.CSS样式提供了运动 过度的属性:transition 过度的属性值:attr  ,time  , liner  ,  delay: 值分别是:属性(css),花费的时间,变化的速度(默认匀速), ...

  5. Soa思想分布式服务webservice WCF

    什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成,这 ...

  6. c#异步等待

    1:一直等待 2方法  现实等待 3:方法    带返回值得 begin -endinvoke 4: func 带返回值

  7. git 分支的创建和切换

    每次提交,GIT 都会将他们串成一个时间线,截止到目前,只有一个时间线,GIT里叫这个分支为主分支,叫master,HEAD指向master,master指向提交,HEAD指向当前的分支． 一开始的时 ...

  8. Cmder安装配置

    转: 1)Windows 命令行增强 cmder chocolatey 配置指南 2) Windows必备神器Cmder使用教程 3)Windows上的程序员神器——Cmder 4)Windows命令 ...

  9. appache压力测试

    apache自带压力工具测试说明: Usage: ab [options] [http[s]://]hostname[:port]/pathOptions are: -n requests Numbe ...

  10. 201621123008 《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出现 ...