码迷,mamicode.com
首页 > 移动开发 > 详细

[Javascript] Get Started with LeafletJS Mapping

时间:2015-03-21 00:59:31      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:

Leaflet makes creating maps in the browser dead simple. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying

 

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map(‘map‘).setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png‘, {
    attribution: ‘&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors‘
}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup(‘A pretty CSS3 popup. <br> Easily customizable.‘)
    .openPopup();


var circle = L.circle([51.508, -0.11], 500, {
    color: ‘red‘,
    fillColor: ‘#f03‘,
    fillOpacity: 0.5
}).addTo(map);


var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

 

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="HTML5 Canvas Graphics and Animation Video 1" />
    <meta charset="utf-8">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<div id="map" style="width: 100%; height: 630px;"></div>
</body>
</html>

 

技术分享

[Javascript] Get Started with LeafletJS Mapping

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/4354846.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!