Merge branch 'master' of gitlab.maxrocky.com:hanjixin/MeteorologicalBureau

map/index.html

@@ -300,4 +300,4 @@
   </script>
   </script>
 </body>
 </body>
 
 
-</html>
+</html>
\ No newline at end of file

map/indexback.html

@@ -23,7 +23,7 @@
     <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
     <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
 
 
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
-    <script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker"></script>
+    <script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></script>
     <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
     <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> -->
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> -->
     <script language="javascript">
     <script language="javascript">
@@ -37,6 +37,7 @@
       };
       };
       var bounds;
       var bounds;
       var boundsPath = [];
       var boundsPath = [];
+      var Markers= [];
       var road = new AMap.TileLayer({
       var road = new AMap.TileLayer({
         getTileUrl:
         getTileUrl:
           'https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12'
           'https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12'
@@ -133,11 +134,13 @@
             console.log(JSON.parse(res));
             console.log(JSON.parse(res));
             currentDetailList = JSON.parse(res).currentDetailList.slice(
             currentDetailList = JSON.parse(res).currentDetailList.slice(
               0,
               0,
-              1000
+              100
             );
             );
             currentDetailList.map(item => {
             currentDetailList.map(item => {
               setPersonalPoint(item);
               setPersonalPoint(item);
             });
             });
+            console.log(Markers)
+            cluster = new AMap.MarkerClusterer(map, Markers, {gridSize: 80})
           });
           });
         });
         });
       };
       };
@@ -231,32 +234,62 @@
         }
         }
       }
       }
       function setPersonalPoint(item) {
       function setPersonalPoint(item) {
-        console.log(map)
-        const marker = new AMap.ElasticMarker({
-          map: map,
-          // styles: [
-          //   {
-          //     icon: {
-          //       img:
-          //         'https://upload.jianshu.io/users/upload_avatars/8613997/15e570d2-9dd0-4be4-b1c7-f0373ef1adc9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp'
-          //     }
-          //   }
-          // ],
-          zooms:[14,20],
-          center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
-          position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
-          zIndex: 1000,
-          zoomStyleMapping: {
-            14: 0,
-            15: 0,
-            16: 0,
-            17: 0,
-            18: 0,
-            19: 0,
-            20: 0
-          }
-        });
-        map.add(marker);
+        // console.log(map);
+        // const marker = new AMap.ElasticMarker({
+        //   map: map,
+        //   styles: [
+        //     {
+        //       icon: {
+        //         img:
+        //           'https://upload.jianshu.io/users/upload_avatars/8613997/15e570d2-9dd0-4be4-b1c7-f0373ef1adc9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',
+        //         size: [366, 201],
+        //         ancher: [183, 101],
+        //         imageSize: [865, 1156],
+        //         imageOffset: [45, 480],
+        //         fitZoom: 17.5,
+        //         scaleFactor: 2,
+        //         maxScale: 2,
+        //         minScale: 0.125
+        //       }
+        //     }
+        //   ],
+        //   zooms: [0, 20],
+        //   // position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
+        //   position: {Q: 30.8307, R: 104.24599999999998, lng: 104.246, lat: 30.8307},
+        //   zIndex: 100000,
+        //   zoomStyleMapping: {
+        //     14: 0,
+        //     15: 0,
+        //     16: 0,
+        //     17: 0,
+        //     18: 0,
+        //     19: 0,
+        //     20: 0
+        //   }
+        // });
+        // console.log(new AMap.LngLat(Number(item.lon), Number(item.lat)))
+        // marker.setMap(map)
+        // var circleMarker = new AMap.CircleMarker({
+        //   center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
+        //   radius:5+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
+        //   strokeColor:'white',
+        //   strokeWeight:2,
+        //   strokeOpacity:0.5,
+        //   fillColor:'rgba(0,0,255,1)',
+        //   fillOpacity:0.5,
+        //   zIndex:10,
+        //   bubble:true,
+        //   cursor:'pointer',
+        //   clickable: true
+        // })
+        var marker = new AMap.Marker({  
+            map:map,  
+            position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置  
+            icon:"https://a.amap.com/jsapi_demos/static/images/darkRed.png", //marker图标，直接传递地址url  
+            offset:{x:-8,y:-34} //相对于基点的位置  
+        }); 
+        Markers.push(marker)
+        // circleMarker.setMap(map)
       }
       }
       console.log(AMap.ElasticMarker);
       console.log(AMap.ElasticMarker);
     </script>
     </script>