code：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />

</head>

<body>

    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"/>

    <script>

    var map = L.map('map').setView([30, 118], 4);

    L.tileLayer('http://{s}.mapabc.com/mapabc/maptile?&x={x}&y={y}&z={z}', {

    subdomains: ["emap1", "emap2", "emap3"]

    }).addTo(map);

    </script>

</body>

</html>

简单介绍：

L.map是在页面上创建地图并操控它的只要方法。

L.map('map').setView([30, 118], 4)
其形式相当于：L.map( <HTMLElement|String> *id*, <Map options> *options*? )

L.tileLayer用于在地图中加载瓦片(示例加载mapabc的瓦片)。

L.tileLayer('http://{s}.mapabc.com/mapabc/maptile?&x={x}&y={y}&z={z}', {

    subdomains: ["emap1", "emap2", "emap3"]

    }).addTo(map)
其形式相当于：L.tileLayer( <String> *urlTemplate*, <TileLayer options> *options*? )

Demo：http://jsfiddle.net/shitao1988/KDr4B/

【Leafletjs】1.创建一个地图的更多相关文章

  1. google maps js v3 api教程(1) -- 创建一个地图

    原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...

  2. 利用OpenStreetMap（OSM）数据搭建一个地图服务

     http://www.cnblogs.com/LBSer/p/4451471.html 图 利用OSM数据简单发布的北京地图服务   一.OSM是什么 开放街道图(OpenStreetMap,简称O ...

  3. [原] SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript ...

  4. UE4编程之C++创建一个FPS工程（一）创建模式&角色&处理输入

    转自:http://blog.csdn.net/u011707076/article/details/44180951 从今天开始,我们一起来学习一下,如何使用C++将一个不带有任何初学者内容的空模板 ...

  5. 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  6. Ionic 2 中创建一个照片倾斜浏览组件

    内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...

  7. android wear开发：为可穿戴设备创建一个通知 - Creating a Notification for Wearables

    注:本文内容来自:https://developer.android.com/training/wearables/notifications/creating.html 翻译水平有限,如有疏漏,欢迎 ...

  8. React自己写的一个地图小组件

    由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只 ...

  9. openlayer3 基础学习一创建&显示地图

    <!doctype html> <html lang="en"> <head> <link rel="stylesheet&qu ...

随机推荐

  1. 高性能Web系统设计方案(初稿目录),支持者进

    第一部分 客户端篇 1.压缩js.css,将js的引入放在</html>之前; 2.合并一个页面下的js/css文件,压缩传输.(SquishIt) 相关博文 3.ajax技术应用.aja ...

  2. Microsoft Orleans 之 入门指南

    Microsoft Orleans 在.net用简单方法构建高并发.分布式的大型应用程序框架. 原文:http://dotnet.github.io/orleans/ 在线文档:http://dotn ...

  3. github.com/dotnet/orleans

    Orleans is a framework that provides a straight-forward approach to building distributed high-scale ...

  4. LeetCode - Populating Next Right Pointers in Each Node

    题目: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode ...

  5. Dapper学习 - Dapper的基本用法(二) - 存储过程/函数

    上一篇貌似少介绍了自定义函数和存储过程, 因为这两个也可以使用查询的方式来实现功能, 这一篇就补上 一.自定义函数的创建和调用 (mysql的) Delimiter $$ drop function ...

  6. 关于Response.Redirect和Server.Execute的区别

    Server.Transfer("path")内部重定向请求,是服务器内部的接管,浏览器无法意识到这个接管的发生,浏览器地址栏也不会发生变化.而Response.Redirect( ...

  7. C#的变迁史 - C# 2.0篇

    在此重申一下,本文仅代表个人观点,如有不妥之处,还请自己辨别. 第一代的值类型装箱与拆箱的效率极其低下,特别是在集合中的表现,所以第二代C#重点解决了装箱的问题,加入了泛型.1. 泛型 - 珍惜生命, ...

  8. iOS阶段学习第15天笔记(NSDate操作)

    iOS学习(OC语言)知识点整理 一.OC关于NSDate类的操作实例代码 //默认直接显示对象,显示的是格林威治时间 //获取当前日期时间的实例方法 NSDate *date1=[[NSDate a ...

  9. jquery 删除cookie失效的解决方法

    最近在做网站退出功能的时候出现删除Cookie 的时候总是失效. 1.使用$.cookie("name","");  结果出来是生成了一个新的空值的cookie ...

  10. C#写爬虫，版本V1.0

    之前看了Sql Server中的基本数据类型,发现image这个类型还是比较特殊的. 于是乎就做了一个将图片以二进制流形式存储的程序http://www.cnblogs.com/JsonZhangAA ...