marker batch dynamic data

src/views/Screen/index.vue

@@ -110,7 +110,7 @@ export default {
   data() {
     return {
       map: null,
-	  infoWindow: null,
+      infoWindow: null,
       navActive: null,
       sjzlList: [],
       srphList: [],
@@ -164,26 +164,90 @@ export default {
       });
 
       console.log(VUE.map, "map");
-      addMarker();
-
-      //添加marker标记
-      function addMarker() {
-        VUE.map.clearMap();
+      // 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} },
+      ]
+      // var markers = [
+      //   {
+      //     icon: "/static/images/marker-dp.png",
+      //     position: [116.481181, 39.989792],
+      //   },
+      //   {
+      //     icon: "/static/images/marker-dp.png",
+      //     position: [116.305467, 39.989799],
+      //   },
+      //   {
+      //     icon: "/static/images/marker-dp.png",
+      //     position: [116.305467, 39.807761],
+      //   },
+      // ];
+
+      // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
+      markers.forEach(function (item, index) {
         var marker = new AMap.Marker({
           map: VUE.map,
-          position: [116.481181, 39.989792],
+          // 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.infoWindow.open(VUE.map, marker.getPosition());
+          VUE.showInfoWindow(marker, item.extraData);
         });
-      }
+      });
+
+      // //添加marker标记
+      // function addMarker(marker) {
+      //   // VUE.map.clearMap();
+      //   var marker = new AMap.Marker({
+      //     map: VUE.map,
+      //     // position: [116.481181, 39.989792],
+      //     position: [marker.position[0], marker.position[1]],
+      //       icon: marker.icon,
+      //     // icon: "/static/images/marker-dp.png",
+      //   });
+
+
+      //   // //鼠标点击marker弹出自定义的信息窗体
+      //   marker.on("click", function () {
+      //     VUE.infoWindow.open(VUE.map, marker.getPosition());
+      //   });
+      // }
       const item = {};
       //实例化信息窗体
-      var title =
-          '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
-        content = `<div class="popupBgImage" style="">
+      VUE.infoWindow = new AMap.InfoWindow({
+        isCustom: true, //使用自定义窗体
+        anchor: "top-center",
+        // content: createInfoWindow(title, content),
+        // 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><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
+				// 			<dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
+				// 		</dl>
+				// 		<button type="button">更多</button>
+				// 	</div>`,
+
+        offset: new AMap.Pixel(30, 70),
+      });
+
+      VUE.infoWindow.on("open", function () {
+        // 关闭信息框
+        document.getElementById("closeInfoWindowBtn").onclick = () => {
+          VUE.infoWindow.close();
+        };
+      });
+    },
+    showInfoWindow(marker, item) {
+      const content = `<div class="popupBgImage" style="">
 						<h4>详细信息</h4><i id="closeInfoWindowBtn"></i>
 						<dl>
 							<dd><font>孵化器名称：</font><span>${item.incubatorName}</span></dd>
@@ -193,34 +257,12 @@ export default {
 							<dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
 							<dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
 						</dl>
-						<button type="button">更多</button>
+						<button type="button" id="goMoreBtn">更多</button>
 					</div>`;
-
-      VUE.infoWindow = new AMap.InfoWindow({
-        isCustom: true, //使用自定义窗体
-        anchor: "top-center",
-        // content: createInfoWindow(title, content),
-        content,
-
-        offset: new AMap.Pixel(30, 70),
-		open: function(){
-		}
-	});
-	
-	VUE.infoWindow.on('open',function(){ // 关闭信息框
-		document.getElementById("closeInfoWindowBtn").onclick = () => {
-			VUE.infoWindow.close();
-		};
-		
-	  })
-
-    //   document.getElementById("closeInfoWindowBtn").onclick = () => {
-    //     this.closeInfo();
-    //   };
+      this.infoWindow.setContent(content);
+      this.infoWindow.open(this.map, marker.getPosition());
     },
-	closeInfo() {
-        this.infoWindow.close();
-      },
+
     sjzl() {
       // 数据总览
       request({