<%--
Created by IntelliJ IDEA.
Date: 2017/6/20
Time: 16:41
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>
<%--给地图div加个样式，设置div大小--%>
<style>
#map-container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<p>测试leaflet！</p>
<div id="map-container"></div>
<script type="text/javascript">
<%--设置地图的中心（纬度，经度）和缩放级别，初始化一个地图对象--%>
var m = L.map('map-container').setView([30.51, 114.31], 7);
/*添加图层（图层是指随地图移动而移动的任何东西，比如添加的圆、多边形等）*/
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
/*设置地图的最大视图*/
maxZoom: 18,
/*attribution后面的一大堆东西，就是显示在地图右下角的地图注释*/
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://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(m);
/*在右上角添加放大缩小图标*/
L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小', position: 'topright' }).addTo(m);
/*添加比例尺*/
L.control.scale().addTo(m); //比例尺
/*在地图中添加圆形*/
var circle = L.circle([30.51, 114.31], 5000, {
color: 'red', //设置圆形边框的颜色
fillColor: '#f03', //设置圆形内填充的颜色
fillOpacity: 0.5 //设置填充颜色的透明度
}).addTo(m);
/*添加标记*/
var marker = L.marker([30.51, 114.41]).addTo(m);
/*添加多边形*/
var polygon = L.polygon([
[30.47, 114.23],
[30.45, 114.31],
[30.51, 114.39]
], {
color: 'yellow',
fillColor: '#f03',
fillOpacity: 0.5 //设置填充颜色的透明度
}).addTo(m);
/*当鼠标点击下面的图层对象时，会弹出带有文本的气泡*/
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
//openPopup()方法表示地图初始化后就默认弹出气泡，该方法不能同时作用于多个对象，如果作用多个对象，以最后一次调用为准
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
/*添加事件，当鼠标点击地图任意位置，弹出警告框，e.latlng是返回触发当前事件对象的纬经度坐标*/
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
m.on('click', onMapClick);
</script>
</body>
</html>