| | |
| | | <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); |
| | | }); |
| | | 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> |