feat: 优化地图效果

src/views/page2/cmap.vue

@@ -77,11 +77,11 @@ export default {
             let polygon = new AMap.Polygon({
               path: path,
 
-              strokeColor: `red`,
+              strokeColor: `#00f`,
               strokeWeight: 6,
-              strokeOpacity: 0.2,
-              fillOpacity: 0.4,
-              fillColor: `#00f`,
+              strokeOpacity: 0.7,
+              fillOpacity: 0.2,
+              fillColor: `#1791fc`,
               zIndex: 50,
               bubble: true,
               // fillColor: `#ccebc5`,
@@ -96,8 +96,15 @@ export default {
             })
             polygon.on(`mouseover`, (e) => {
               console.log(`datadatadata`, data)
-              vm.infoBoxData = data
-              openInfo()
+              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
+              if (window.map.getZoom() <= 12) {
+                vm.infoBoxData = data
+                openInfo()
+                // polygon.setOptions({
+                //   fillOpacity: 0.7,
+                //   fillColor: `#7bccc4`,
+                // })
+              }
               // polygon.setOptions({
               //   fillOpacity: 0.7,
               //   fillColor: `#7bccc4`,
@@ -112,6 +119,38 @@ export default {
               //   fillColor: `#ccebc5`,
               // })
             })
+            if (path[0]) {
+              // console.log(`AMap.event.addListener`, AMap.event.addListener)
+              const markerContent = `
+                <div class="markerContent">
+                  <div>${data.properties.name}</div>
+                  <img class="img" src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png">
+                </div>
+              `
+              let marker = new AMap.Marker({
+                content: markerContent,
+                // icon: `https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png`,
+                position: path[0],
+              })
+              marker.on(`mouseover`, () => {
+                vm.infoBoxData = data
+                vm.$nextTick(() => {
+                  openInfo()
+                })
+              })
+              window.map.add(marker)
+              // setTimeout(() => {
+              //   AMap.event.addListener(marker, `click`, function () {
+              //     vm.infoBoxData = data
+              //     infoWindow.open(window.map, openInfo())
+              //   })
+              // }, 1000)
+              // // 鼠标点击marker弹出自定义的信息窗体
+              // AMap.event.addListener(marker, `click`, function () {
+              //   vm.infoBoxData = data
+              //   infoWindow.open(window.map, openInfo())
+              // })
+            }
             window.map.add(polygon)
           }
           window.map = new AMap.Map(`container`, {
@@ -127,8 +166,13 @@ export default {
             center: [108.597461, 28.047503], // 初始化地图中心点位置
             resizeEnable: true,
             layers: [
-              new AMap.TileLayer.Satellite(),
-              new AMap.TileLayer.RoadNet(),
+              // new AMap.TileLayer.Satellite({
+              //   opacity: 1,
+              // }),
+              // new AMap.TileLayer.RoadNet({
+              //   opacity: 1,
+              // }),
+              // https://wprd01.is.autonavi.com/appmaptile?x=204&y=108&z=8&lang=zh_cn&size=1&scl=1&style=8&ltype=11
               // 谷歌图
               // new AMap.TileLayer({
               //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
@@ -145,12 +189,14 @@ export default {
               new AMap.TileLayer({
                 getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
                 zIndex: 20,
-                zoom: 17,
+                opacity: 1,
+                zoom: 19,
               }),
               new AMap.TileLayer({
                 getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
                 zIndex: 20,
-                zoom: 17,
+                opacity: 0.7,
+                zoom: 19,
               }),
             ],
             // zooms: [16, 20],
@@ -191,6 +237,24 @@ export default {
 </script>
 
 <style label="less">
+.markerContent {
+  min-width: 100px;
+  display: block;
+  background-color: #fff;
+  color: #000;
+  border-radius: 10px;
+  padding: 10px 10px;
+  position: relative;
+  line-height: 1.5em;
+  .img {
+    position: absolute;
+    left: -10px;
+    bottom: -30px;
+    /* bottom: -30px; */
+    /* left: -30px; */
+    /* left: calc(50% - 10px); */
+  }
+}
 .custom-input-card {
   width: 18rem;
 }