leaflet入门（一）示例
代码示例：
<!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: '© <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入门（一）示例的更多相关文章
- 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.使 ...
- Spring MVC 入门教程示例 （一）
今天和大家分享下 Spring MVC 入门教程 首先还是从 HelloWorld web 工程开始 -------------------------- 1.首先创建一个Maven Web工程 ...
- wxPython 入门开发示例
1.背景资料 wxPython API:https://www.wxpython.org/Phoenix/docs/html/ 2.入门示例 wxPython最重要的两个概念:App与Frame,其中 ...
- leaflet入门（五）API翻译（下）
L.PointConstructor(函数构造器)Properties(属性)Methods(方法) L.BoundsConstructor(函数构造器)Properties(属性)Methods(方 ...
- leaflet入门（四）API翻译（上）
L.Map L.Marker L.Popup L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div元素和带有地图选项的描述的文字对象来实 ...
- Highcharts入门小示例
一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...
- 复杂事件处理——Esper入门（示例程序）
前面对Esper Quick Start & Tutorial进行了简单描述,希望各位看官能够大致了解what is Esper,甚至对how to work有朦朦胧胧的了解. 开发一个Esp ...
- Arduino 入门程序示例之直流电机（2015-06-15）
概述 演示直流电机的控制. 示例程序 PWM控制直流电机 略过控制电机转停的示例啦,有需要就把这里的 PWM 换成数字口输出 HIGH 或 LOW 就行了. // ------------------ ...
- Arduino 入门程序示例之一片 LED(2015-06-11)
概述 从点到线,从线到面.现在开始要来一片的 LED 了,一大波的 LED 正在到来! 示例程序 因为手头没有现成的模块,手头只有 595,所以这里每一个示例程序都是使用 74HC595 扩展 IO ...
随机推荐
- 1F - A+B for Input-Output Practice (III)
Your task is to Calculate a + b. Input Input contains multiple test cases. Each test case contains a ...
- c++ 备忘
一.类型转换#include <sstream>stringstream ss;ss<<reverse(s1)<<'\t'<<reverse(s2);s ...
- hdu 1558 (线段相交+并查集) Segment set
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1558 题意是在坐标系中,当输入P(注意是大写,我当开始就wa成了小写)的时候输入一条线段的起点坐标和终点坐 ...
- 前端面试问题js汇总
1.javascript的typeof返回哪些数据类型 Object number function boolean underfind 2,数组方法pop() push() unshift()shi ...
- JVM 类加载器 （二）
1.类加载器(ClassLoader)负责加载class文件,class文件在文件开头有特定的文件标识,并且ClassLoader只负责 class 文件的加载,至于class文件是否能够运行则由Ex ...
- Scrapy框架学习笔记
1.Scrapy简介 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网 ...
- Django报错：__init__() missing 1 required positional argument: 'on_delete'
原因: 在django2.0后,定义外键和一对一关系的时候需要加on_delete选项,此参数为了避免两个表里的数据不一致问题,不然会报错:TypeError: __init__() missing ...
- [Groovy] 创建Excel,追加Excel
package ScriptLibrary import java.awt.Color import java.awt.GraphicsConfiguration.DefaultBufferCapab ...
- Netty Reator（二）Scalable IO in Java
Netty Reator(二)Scalable IO in Java Netty 系列目录 (https://www.cnblogs.com/binarylei/p/10117436.html) Do ...
- PHP 判断字符串括号是否匹配
<?php function aa($str) { $temp = array(); for ($i = 0; $i < strlen($str); $i++) { $t = $str[$ ...