<!DOCTYPE html>
<html>
<head>
<title>Custom Icons Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 900px;
height: 900px;
}
.leaflet-container{
background: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div id='map'></div>
<script>
// 限制地图展示范围
var corner1 = L.latLng(41.22820, 126.05230), //设置左上角经纬度
corner2 = L.latLng(39.62679, 123.03930), //设置右下点经纬度
bounds = L.latLngBounds(corner1, corner2); //构建视图限制范围
var mymap = L.map('map',{maxZoom:10,minZoom:8,maxBounds: bounds}).setView([40.476203, 124.348755], 9);
var mapLayers = L.layerGroup([
L.tileLayer('./satellite/{z}/{x}/{y}.jpg', {
// maxZoom: 20,
// minZoom: 3,
}),
L.tileLayer( './overlay/{z}/{x}/{y}.png', {
// maxZoom: 20,
// maxNativeZoom: 18,
// minZoom: 3,
opacity: 0.8
})
]).addTo(mymap)
let markerArr=[
{
lat:40.476203,
lng:124.348755,
link:'http://www.JD.com',
iconURL:'leaf-green.png',
},{
lat:40.56203,
lng:124.348755,
link:'http://www.taobao.com',
iconURL:'leaf-red.png',
},{
lat:40.476203,
lng:124.48755,
link:'http://www.baidu.com',
iconURL:'leaf-orange.png',
},
]
for (var i =0 ; i < markerArr.length; i++) {
let obj=markerArr[i];
//自定义图标展示在地图上
var greenIcon = L.icon({
iconUrl: obj.iconURL,
shadowUrl: '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([obj.lat, obj.lng], {icon: greenIcon}).addTo(mymap).on('click', function (e){
// alert(obj.link)
window.location.href=obj.link
})
}
</script>
</body>
</html>
leaflet 加载瓦片地图 （213个子文件） 
leaflet.css 14KB
index.html 3KB
388.jpg 7KB 387.jpg 7KB 194.jpg 7KB 385.jpg 7KB 385.jpg 7KB 384.jpg 7KB 191.jpg 7KB 192.jpg 7KB 386.jpg 7KB 193.jpg 7KB 95.jpg 7KB 388.jpg 7KB 383.jpg 7KB 386.jpg 7KB 191.jpg 7KB 385.jpg 7KB 193.jpg 6KB 191.jpg 6KB 383.jpg 6KB 387.jpg 6KB 386.jpg 6KB 384.jpg 6KB 383.jpg 6KB 383.jpg 6KB 96.jpg 6KB 95.jpg 6KB 385.jpg 6KB 191.jpg 6KB 386.jpg 6KB 388.jpg 6KB 386.jpg 6KB 193.jpg 6KB 192.jpg 6KB 191.jpg 6KB 385.jpg 6KB 387.jpg 6KB 95.jpg 6KB 387.jpg 6KB 383.jpg 6KB 96.jpg 6KB 387.jpg 6KB 385.jpg 6KB 384.jpg 6KB 191.jpg 6KB 383.jpg 6KB 387.jpg 6KB 383.jpg 6KB 385.jpg 6KB 192.jpg 6KB 383.jpg 6KB 385.jpg 6KB 386.jpg 6KB 386.jpg 6KB 384.jpg 6KB 386.jpg 6KB 388.jpg 6KB 384.jpg 6KB 387.jpg 6KB 193.jpg 6KB 384.jpg 6KB 384.jpg 6KB 387.jpg 6KB 384.jpg 6KB 193.jpg 6KB 383.jpg 6KB 192.jpg 6KB 193.jpg 6KB 192.jpg 6KB 192.jpg 6KB 384.jpg 6KB 385.jpg 6KB 386.jpg 6KB 385.jpg 6KB 387.jpg 6KB 384.jpg 6KB 383.jpg 6KB 96.jpg 6KB 194.jpg 6KB 194.jpg 6KB 386.jpg 6KB 388.jpg 6KB 388.jpg 6KB 387.jpg 5KB 388.jpg 5KB 389.jpg 5KB 194.jpg 4KB 97.jpg 4KB 388.jpg 4KB 97.jpg 4KB 97.jpg 4KB 389.jpg 4KB 194.jpg 3KB 389.jpg 3KB 388.jpg 3KB 389.jpg 3KB 388.jpg 3KB 389.jpg 3KB 389.jpg 3KB共 213 条
- 1
- 2
- 3
评论0