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. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  2. CSS好看的按钮

    好看的按钮 <style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd ...

  3. [New Portal]Windows Azure Virtual Machine (17) Virtual Machine成本分析

    <Windows Azure Platform 系列文章目录> 在Windows Azure VM里,计费模式是和以下几个因素有关: 成本1: VM Type and VM Size 具体 ...

  4. Theano入门神经网络(四)

    这一部分主要介绍用Theano 实现softmax函数. 在多分类任务中经常用到softmax函数,首先上几个投影片解释一下 假设目标输出是y_hat ,激活函数后的Relu y 一个是1.2 一个是 ...

  5. Theano入门神经网络(三)

    附录一个:Keras学习随笔 http://blog.csdn.net/niuwei22007/article/details/49045909 参考 <Python Machine Learn ...

  6. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  7. 【Swift学习】Swift编程之旅---类和结构体（十三）

    与其他编程语言所不同的是,Swift 并不要求你为自定义类和结构去创建独立的接口和实现文件.你所要做的是在一个单一文件中定义一个类或者结构体,系统将会自动生成面向其它代码的外部接口. 注意:通常一个类 ...

  8. Linux 小工具学习之（1）——Wget十例[翻译]

    在本博文中我们将学习一下wget这个工具.wget可以使用HTTP.HTTPS.和FTP等常见网络协议来从万维网(WWW)获取文件(从它的名字来源也可以看出 World Wide Web Get -& ...

  9. Git版本控制工具学习

    Git代码管理工具学习 分布式管理工具:git 相比较svn它更加的方便,基本上我们的操作都是在本地进行的. Git文件的三种状态:已提交,已修改,以暂存. 已提交:表示文件已经被保存到本地数据库. ...

  10. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...