| | |
|---|
| | | <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> --> |
|---|
| | | <script src="./getUrlData.js"></script> |
|---|
| | | <link rel="stylesheet" href="./MarkerCluster.css" /> |
|---|
| | | <link rel="stylesheet" href="./MarkerCluster.Default.css" /> |
|---|
| | | <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> |
|---|
| | | <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="./lid/layui/css/layui.css" media="all"> |
|---|
| | | <script src="./lid/layui/layui.js" charset="utf-8"></script> |
|---|
| | | <!-- jqurey --> |
|---|
| | | <script src="./lid/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> |
|---|
| | | var map = null, |
|---|
| | | getdata = null; |
|---|
| | | </script> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | function beginJuheMap(map, data) { |
|---|
| | | 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(data, 43545343) |
|---|
| | | for (var i = 0; i < data.length; i++) { |
|---|
| | | var a = data[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); |
|---|
| | | // }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | <script> |
|---|
| | | window.onload = () => { |
|---|
| | | getdata = JSON.parse(decodeURI(getQueryVariable('data'))); |
|---|
| | | // var dataListUrl = window.location.href; |
|---|
| | | // decodeURI(dataListUrl); |
|---|
| | | console.log(getdata) |
|---|
| | | beginJuheMap(map, getdata); |
|---|
| | | wx.miniProgram.getEnv(function (res) { |
|---|
| | | console.log(res.miniprogram) // true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
