marker dynamic data

src/views/Screen/index.vue

 <template>
   <div class="Screen cm-layout">
     <div class="a_0">
-      <!-- <cu-amap ref="amap" :options="amapOptions()" /> -->
-
       <div id="container"></div>
       <div class="a0_">
         <header id="header">
@@ -106,6 +104,9 @@ import request from "@/utils/request";
 function closeInfoWindow(mapEle) {
   mapEle.clearInfoWindow();
 }
+function isTechUser(){
+  return localStorage.getItem('groupIdByloginType')*1===2 // 是否为科技局用户
+}
 export default {
   data() {
     return {
@@ -172,77 +173,19 @@ export default {
       });
 	},
 	goBackendHome(){
-		// if(localStorage.getItem('groupIdByloginType')*1 == 1){ // 孵化器用户
-		// 	location.href = '/home/enterprise'
-		// 	return
-		// }
-		// if(localStorage.getItem('groupIdByloginType')*1 == 2){ // 科技据用户
-		// 	location.href = '/home/tech'
-		// 	return
-		// }
-		// location.reload()
 		location.href = '/home/enterprise'
 	},
     initMap() {
       var VUE = this;
       VUE.map = new AMap.Map("container", {
         resizeEnable: true,
-        center: [116.481181, 39.989792],
+        center: [122.050189, 37.515189],
         zoom: 13,
       });
 
       console.log(VUE.map, "map");
       // addMarker();
-      var markers = [
-        {
-          position: [116.481181, 39.989792],
-          extraData: {
-            incubatorName: "23423",
-            operatingAgency: "111",
-            incubatorCount: 0,
-            graduationCount: 11,
-            totalArea: 22,
-            totalIncome: 223,
-          },
-        },
-        {
-          position: [116.305467, 39.989799],
-          extraData: {
-            incubatorName: "666",
-            operatingAgency: "111",
-            incubatorCount: 0,
-            graduationCount: 11,
-            totalArea: 22,
-            totalIncome: 223,
-          },
-        },
-        {
-          position: [116.305467, 39.807761],
-          extraData: {
-            incubatorName: "6664444",
-            operatingAgency: "111",
-            incubatorCount: 0,
-            graduationCount: 11,
-            totalArea: 22,
-            totalIncome: 223,
-          },
-        },
-      ];
-
-      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
-      markers.forEach(function (item, index) {
-        var marker = new AMap.Marker({
-          map: VUE.map,
-          // position: [116.481181, 39.989792],
-          position: [item.position[0], item.position[1]],
-          icon: "/static/images/marker-dp.png",
-        });
-        //鼠标点击marker弹出自定义的信息窗体
-        marker.on("click", function () {
-          // VUE.infoWindow.open(VUE.map, marker.getPosition());
-          VUE.showInfoWindow(marker, item.extraData);
-        });
-      });
+      this.getIncubatorMarkers()
 
       const item = {};
       //实例化信息窗体
@@ -260,7 +203,11 @@ export default {
         document.getElementById("goMoreBtn").onclick = function () {
           // alert(this.getAttribute('data-id'))
           // VUE.$route.push('/home/enterprise')
-          location.href = "/home/tech?id=" + this.getAttribute("data-id");
+          if(isTechUser()){
+            location.href = "/home/overview?id=" + this.getAttribute("data-id");
+          }else{
+            location.href = "/home/enterprise?id=" + this.getAttribute("data-id");
+          }
         };
       });
     },
@@ -268,16 +215,16 @@ export default {
       const content = `<div class="popupBgImage" style="">
 						<h4>详细信息</h4><i id="closeInfoWindowBtn"></i>
 						<dl>
-							<dd><font>孵化器名称：</font><span>${item.incubatorName}</span></dd>
-							<dd><font>运营机构：</font><span>${item.operatingAgency}</span></dd>
-							<dd><font>在孵企业：</font><span>${item.incubatorCount || 0}家</span></dd>
-							<dd><font>毕业企业：</font><span>${item.graduationCount || 0}家</span></dd>
+							<dd class="textEllipsis"><font>孵化器名称：</font><span :title="${item.incubatorName}">${item.incubatorName}</span></dd>
+							<dd class="textEllipsis"><font>运营机构：</font><span :title="${item.operatingAgency}">${item.operatingAgency}</span></dd>
+							<dd class="textEllipsis"><font>在孵企业：</font><span :title="${item.incubatorCount}">${item.incubatorCount || 0}家</span></dd>
+							<dd class="textEllipsis"><font>毕业企业：</font><span :title="${item.graduationCount}">${item.graduationCount || 0}家</span></dd>
 							<dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
 							<dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
 						</dl>
 						<button type="button" id="goMoreBtn" data-id="${
-              item.incubatorName
-            }">更多</button>
+              item.id
+            }">${isTechUser()?'更多':'进入后台'}</button>
 					</div>`;
       this.infoWindow.setContent(content);
       this.infoWindow.open(this.map, marker.getPosition());
@@ -741,54 +688,44 @@ export default {
       });
     },
 
-    amapOptions(cmap) {
-      var self = this;
-      var VUE = this;
-      return {
-        zoom: 13,
-        center: [122.050189, 37.515189],
-        //showLabel: true,
-        //pitch: 40,
-        onload: function (cmap) {
-          console.log("onload ________________ ", self, cmap);
-          const form = {
-            longitude: 122.050189,
-            latitude: 37.515189,
-          };
-          self.cmap = cmap;
-          // debugger
-          VUE.cmap = cmap;
-          var center = cmap.options.center;
-          var lng = form.longitude || center[0],
-            lat = form.latitude || center[1];
-          if (lng && lat) {
-            cmap.setCenter([lng, lat]);
-
-            addMarker();
-            // // 添加标记
-            // cmap.addMarker({
-            //   lnglat: [lng, lat],
-            //   title: "",
-            //   content: markerContent,
-            //   offset: new AMap.Pixel(-13, -30),
-            //   draggable: true,
-            //   click: function () {
-            //     infoWindow.open(cmap, marker.getPosition()); // 打开信息窗口
-            //   },
-            // });
-
-            // //鼠标点击marker弹出自定义的信息窗体
-            // AMap.event.addListener(cmap, "click", function () {
-            //   infoWindow.open(map, marker.getPosition());
-            // });
+    getIncubatorMarkers(){
+      request({
+        url: "api/homePage/incubatorLocation",
+        method: "get",
+      }).then((res) => {
+        let result = res.body || []
+        var markers = result.map((item, index)=>{
+          return {
+            position: [item.longitude, item.latitude],
+            extraData: {
+              id: item.id,
+              incubatorName: item.incubatorName,
+              operatingAgency: item.operatingAgency,
+              incubatorCount: item.incubatorCount,
+                graduationCount: item.graduationCount,
+                totalArea: item.totalArea,
+                totalIncome: item.totalIncome,
+            }
           }
-        },
-        click: function (e, cmap) {
-          console.log("click ________________ ", cmap);
-        },
-      };
+        })
+       
+          // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
+          markers.forEach((item, index) => {
+            var marker = new AMap.Marker({
+              map: this.map,
+              // position: [116.481181, 39.989792],
+              position: [item.position[0], item.position[1]],
+              icon: "/static/images/marker-dp.png",
+              imageSize: new AMap.Size(22, 22), 
+            });
+            //鼠标点击marker弹出自定义的信息窗体
+            marker.on("click", () => {
+              // VUE.infoWindow.open(VUE.map, marker.getPosition());
+              this.showInfoWindow(marker, item.extraData);
+            });
+          });
+      })
     },
-
     // 首页
     module0(m, t, f, dmIndex, view) {
       var self = this,
@@ -1200,6 +1137,19 @@ export default {
 </script>
 
 <style lang="scss" scope>
+.amap-icon{ // 高德地图样式覆盖
+  img{
+    width:0.42rem !important;
+    height: 0.42rem !important;
+  }
+}
+.textEllipsis {
+  display: inline-block;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 超出隐藏 */
+  text-overflow: ellipsis; /* 添加省略号 */
+  width: 320px; /* 设置宽度 */
+}
 #container {
   height: 100%;
   width: 100%;
@@ -1985,11 +1935,11 @@ export default {
       cursor: pointer;
     }
     dl {
-      padding: 0 0.4rem;
+      padding: 0 0.25rem;
     }
     dd {
       margin-top: 0.08rem;
-      margin-bottom: 0.08rem;
+      // margin-bottom: 0.08rem;
     }
     dd > font {
       // 标题