实现手机交互式地图的一个开源的JS库：Leaflet.js
jopen
11年前
基于JavaScript library开发的支持 手机应用的互动地图，免费开源，用户可以自由下载使用。
LeafletJS的体积只有28KB，操作简单、性能优越、可用性极强，主要支持桌面和移动平台使用，支持HTML5和CSS3，支持API接入，帮助设计师开发提高工作效率。
<!DOCTYPE html> <html> <head> <title>Leaflet Quick Start Guide Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引用 --> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script> <!-- 引用本地 --> <!-- <link rel="stylesheet" href="debug/leaflet.css" /> <script type="text/javascript" src="debug/deps.js"></script> <script src="debug/leaflet-include.js"></script> --> <script> window.onload=function(){ //初始化地图控件 //var map = L.map('map').setView([51.505, -0.09], 13); var map = L.map('map', {center: [51.505, -0.09],zoom: 15}); //添加图层 L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' }).addTo(map); //添加点标记 L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); //添加circle L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup("I am a circle."); //添加polygon L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map).bindPopup("I am a polygon."); //给地图点击添加弹窗事件 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> </head> <body> <div id="map" style="width: 1500px; height: 900px"></div> </body> </html> <!DOCTYPE html> <html> <head> <title>marker test</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script> --> <link rel="stylesheet" href="debug/leaflet.css" /> <script type="text/javascript" src="debug/deps.js"></script> <script src="debug/leaflet-include.js"></script> <script> window.onload=function(){ //初始化地图控件 //var map = L.map('map').setView([51.505, -0.09], 13); var map = L.map('map', {center: [51.505, -0.09],zoom: 15}); //map.attributionControl.addAttribution("Earthquake data © GeoNames"); //添加图层 L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' }).addTo(map); //添加点标记 L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); //添加自定义图标的点标记 var greenIcon = L.icon({ iconUrl: 'debug/images/leaf-green.png', shadowUrl: 'debug/images/leaf-shadow.png', iconSize: [38, 95], // size of the icon shadowSize: [50, 64], // size of the shadow iconAnchor: [22, 94], // point of the icon which will correspond to marker's location shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor }); L.marker([51.502, -0.093], {icon: greenIcon,title:"hello world"}).addTo(map).bindPopup("I am a marker."); //添加自定类图标的点标记 var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'debug/images/leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); var greenIcon = new LeafIcon({iconUrl: 'debug/images/leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'debug/images/leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'debug/images/leaf-orange.png'}); L.icon = function (options) { return new L.Icon(options); }; L.marker([51.499, -0.1], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); L.marker([51.496, -0.1], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf."); L.marker([51.493, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf."); }; </script> </head> <body> <div id="map" style="width: 1500px; height: 900px"></div> </body> </html> 以下是它的详细特性：
Available Map Layers
- Tile layers
- Markers
- Popups
- Vector layers: polylines, polygons, circles, rectangles, circle markers
- GeoJSON layers
- Image overlays
- WMS layers
- Layer groups
Interaction Features
General
- Drag panning with inertia
On Desktop Browsers
- Scroll wheel zoom
- Double click zoom
- Zoom to area (shift-drag)
- Keyboard navigation
(with arrows and +/-keys)
On Mobile Browsers
- Multi-touch zoom
(iOS, Android 4+, Win8) - Double tap zoom
For Layers
- Various events: click (tap), mouseover, contextmenu, etc.
- Marker dragging
Visual Features
- Zoom animation (
for all layers , including tile layers, markers and vector layers) - Panning animation
- Smooth continuous zoom on modern mobile devices
- Tile and popup fade animation
- Very nice default design for markers, popups and other map controls
- Retina resolution support for tile layers and markers
Customization Features
- Pure CSS3 popups and controls for easy restyling
- Image- and HTML-based markers
- A simple interface for implementing custom map layers
- The same for custom map controls
- Custom map projections (with
EPSG:4326,EPSG:3857andEPSG:3395out of the box) - Powerful OOP facilities for extending existing classes
Performance Features
- Hardware acceleration on iOS (and other modern browsers) makes it feel as smooth as native apps
- Utilizing CSS3 features like Transitions, Transforms, requestAnimationFrame where possible to make panning and zooming really smooth
- Smart polyline/polygon rendering with dynamic clipping and simplification makes it responsive even when displaying objects with thousands of points
- Modular design and a build system allow you to reduce the library size by leaving out features you don't need
- Tap delay elimination on mobile devices makes controls and layers respond to taps immediately
Map Controls
- Zoom buttons
- Attribution
- Layer switcher
- Scale
Browser Support
On Desktop
- Chrome
- Firefox
- Safari 5+
- Opera 12+
- IE 7–11
On Mobile
- Safari for iOS 3–7+
- Android browser 2.2+, 3.1+, 4+
- Chrome for Android 4+ and iOS
- Firefox for Android
- Other WebKit browsers (webOS, Blackberry 7+, etc.)
- IE10/11 for Win8 devices
Misc
- Extremely lightweight — around 34 KB of gzipped JS code
- No external dependencies
- Keeps your JS environment clean — no global or native prototypes pollution