From 926b7162f50fcb24a2c801faf058f286204fdbd5 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 06 May 2021 17:49:00 +0800
Subject: [PATCH] 小程序地图更改
---
public/xcxh5map/map.html | 132 ++++++++++++++++++++++++++++++++-----------
1 files changed, 97 insertions(+), 35 deletions(-)
diff --git a/public/xcxh5map/map.html b/public/xcxh5map/map.html
index 6cb7389..d0cfbc6 100644
--- a/public/xcxh5map/map.html
+++ b/public/xcxh5map/map.html
@@ -1,38 +1,100 @@
<!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>
\ No newline at end of file
--
Gitblit v1.9.3