<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link rel="stylesheet" href="./leaflet.css" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
<script src="./leaflet.js"></script>
|
<script src="./moni.js"></script>
|
<link rel="stylesheet" href="./MarkerCluster.css" />
|
<link rel="stylesheet" href="./MarkerCluster.Default.css" />
|
<script src="./leaflet.markercluster-src.js"></script>
|
<title>map</title>
|
<style type="text/css">
|
body {
|
padding: 0;
|
margin: 0;
|
}
|
|
html,
|
body,
|
#map {
|
height: 100%;
|
width: 100%;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="map"></div>
|
<script type="text/javascript">
|
var map = null;
|
function beginJuheMap(map) {
|
map = L.map('map', { //初始化地图
|
center: [31.87, 120.54],
|
zoom: 12,
|
// crs: L.CRS.EPSG4326, //设置坐标系4326
|
attributionControl: false, //去掉右下角
|
zoomControl: false, //去掉缩放
|
});
|
L.tileLayer( //添加切片图层
|
"http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
|
subdomains: ["1", "2", "3", "4"],
|
attribution: "高德"
|
}
|
).addTo(map);
|
var markers = L.markerClusterGroup();
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [30, 30], // 图标尺寸
|
// iconAnchor: [30, 30], // 图标偏移量
|
// popupAnchor: [-20, -20] // 弹出框偏移量
|
}
|
});
|
var carIcon = new transportIcon({ //引入图标
|
iconUrl: './img/gray.png'
|
}),
|
planeIcon = new transportIcon({
|
iconUrl: './img/green.png'
|
}),
|
busIcon = new transportIcon({
|
iconUrl: './img/red.png'
|
});
|
console.log(datalist, 43545343)
|
for (var i = 0; i < datalist.length; i++) {
|
var a = datalist[i];
|
var title = a.title;
|
if (a.state == 0) {
|
var marker = L.marker([a.jd, a.wd], {
|
icon: carIcon,
|
title: title
|
});
|
} else if (a.state == 1) {
|
var marker = L.marker([a.jd, a.wd], {
|
icon: planeIcon,
|
title: title
|
});
|
} else if (a.state == 2) {
|
var marker = L.marker([a.jd, a.wd], {
|
icon: busIcon,
|
title: title
|
});
|
}
|
marker.bindPopup(title);
|
markers.addLayer(marker);
|
}
|
map.addLayer(markers);
|
|
markers.on('click', function (a) {
|
console.log(a.layer, 11111111111);
|
});
|
}
|
beginJuheMap(map);
|
|
</script>
|
</body>
|
|
</html>
|
