標籤：
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 zoomvar map = L.map(‘map‘).setView([51.505, -0.09], 13);// add an OpenStreetMap tile layerL.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png‘, { attribution: ‘© <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 popupL.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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
