| | |
|---|
| | | <!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> |
|---|
| | | <title>map</title> |
|---|
| | | <style type="text/css"> |
|---|
| | | body { |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | |
|---|
| | | <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); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | html, body, #map { |
|---|
| | | height: 100%; |
|---|
| | | width: 100vw; |
|---|
| | | } |
|---|
| | | #map{ |
|---|
| | | height: 300px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="map"></div> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var map = L.map('map').setView([39.92,116.46], 22); |
|---|
| | | L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', { |
|---|
| | | maxZoom: 12 |
|---|
| | | }).addTo(map); |
|---|
| | | |
|---|
| | | L.marker([39.92,116.46]).addTo(map) |
|---|
| | | .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') |
|---|
| | | .openPopup(); |
|---|
| | | console.log(44545) |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | beginJuheMap(map); |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
