Auto Commit

48868340 · 64af954aa92c2a4195233d17 · f48a4a07 · 48868340 · 48868340
隐藏空白更改
内联并排

Showing with 39 addition and 8 deletion

index.html index.html +1 -0

src/components/amap.vue src/components/amap.vue +38 -8

未找到文件。
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
  </head>
  <body>
    <div id="app"></div>
+    <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/citys.js'></script>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/src/components/amap.vue
+++ b/src/components/amap.vue
@@ -18,16 +18,46 @@ function initMap() {
            zoom: 4,           //初始化地图级别
            center: [104.06, 35.67], //初始化地图中心点位置
        });
-        generatePoints().forEach((item) => {
-            const marker = new AMap.Marker({
-                position: new AMap.LngLat(item.position[0], item.position[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                title: '北京'
-            });
+        // generatePoints().forEach((item) => {
+        //     const marker = new AMap.Marker({
+        //         position: new AMap.LngLat(item.position[0], item.position[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        //         title: '北京'
+        //     });

-            // 将创建的点标记添加到已有的地图实例：
-            map.add(marker);
-        })
+        //     // 将创建的点标记添加到已有的地图实例：
+        //     map.add(marker);
+        // })
+        var style = [{
+            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
+            anchor: new AMap.Pixel(6, 6),
+            size: new AMap.Size(11, 11)
+        }, {
+            url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+            anchor: new AMap.Pixel(4, 4),
+            size: new AMap.Size(7, 7)
+        }, {
+            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
+            anchor: new AMap.Pixel(3, 3),
+            size: new AMap.Size(5, 5)
+        }
+        ];
+
+        var mass = new AMap.MassMarks(citys, {
+            opacity: 0.8,
+            zIndex: 111,
+            cursor: 'pointer',
+            style: style
+        });
+
+        var marker = new AMap.Marker({ content: ' ', map: map });
+
+        mass.on('mouseover', function (e) {
+
+            marker.setPosition(e.data.lnglat);
+            marker.setLabel({ content: e.data.name })
+        });

+        mass.setMap(map);
    }).catch(e => {
        console.log(e);
    })