| | |
|---|
| | | <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> |
|---|
| | | <!-- leaflet支持 --> |
|---|
| | | <script src="./lid/leaflet.js"></script> |
|---|
| | | <link rel="stylesheet" href="./lid/leaflet.css" /> |
|---|
| | | <!-- leaflet聚合支持 --> |
|---|
| | | <link rel="stylesheet" href="./lid/MarkerCluster.css" /> |
|---|
| | | <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" /> |
|---|
| | | <script src="./lid/leaflet.markercluster-src.js"></script> |
|---|
| | | <!-- layui支持 --> |
|---|
| | | <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all"> |
|---|
| | | <script src="../map/lib/layui/layui.js" charset="utf-8"></script> |
|---|
| | | <!-- jqurey --> |
|---|
| | | <script src="../map/lib/jquery.js" charset="utf-8"></script> |
|---|
| | | <!-- 微信支持 --> |
|---|
| | | <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> |
|---|
| | | <script src="./js/wx.js"></script> |
|---|
| | | <!-- omyself支持 --> |
|---|
| | | <link rel="stylesheet" href="./css/body.css" /> |
|---|
| | | <!-- 获取urlData --> |
|---|
| | | <script src="./js/getUrlData.js"></script> |
|---|
| | | <!-- 初始化地图 --> |
|---|
| | | <script src="./js/createMap.js"></script> |
|---|
| | | <!-- 初始化属性 --> |
|---|
| | | <script src="./js/def.js"></script> |
|---|
| | | <!-- window.onlond --> |
|---|
| | | <script src="./js/startMap.js"></script> |
|---|
| | | </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> |
|---|
