amap marker

src/views/Screen/index.vue

 <template>
   <div class="Screen cm-layout">
     <div class="a_0">
-	  <cu-amap 
-				ref="amap" 
-				
-				:options="amapOptions()"
-			/>
+      <!-- <cu-amap ref="amap" :options="amapOptions()" /> -->
 
+      <div id="container"></div>
       <div class="a0_">
         <header id="header">
           <div class="b1_bg">
@@ -102,14 +99,18 @@
 <script>
 import { reqApi } from "@/assets/js/httpApi.js";
 import { Highchart } from "@/assets/js/chartTemplates.js";
-import cuAmap from '@/components/AMap';
-import request from '@/utils/request'
-
- 
+import cuAmap from "@/components/AMap";
+import request from "@/utils/request";
 
+//关闭信息窗体
+function closeInfoWindow(mapEle) {
+  mapEle.clearInfoWindow();
+}
 export default {
   data() {
     return {
+      map: null,
+	  infoWindow: null,
       navActive: null,
       sjzlList: [],
       srphList: [],
@@ -119,11 +120,10 @@ export default {
       },
     };
   },
-  components: {cuAmap },
+  components: { cuAmap },
   mounted() {
     var that = this;
     this.$nextTick(() => {
-
       /**
        * 1、地图渲染
        * 1-1、地图坐标点定位回显，marker事件添加
@@ -134,47 +134,110 @@ export default {
        *
        *
        */
+      this.initMap();
 
-		 this.navActive = 0
+      this.navActive = 0;
 
       // 获取总览数据
-		 this.sjzl()
+      this.sjzl();
 
-		 this.srph()
-		 this.qycxcysjfx()
-		 this.fhqfhqysjfx()
-		 this.fhqyndsjsfbhqs()
-		 this.zfqyndsjsfbhqs()
+      this.srph();
+      this.qycxcysjfx();
+      this.fhqfhqysjfx();
+      this.fhqyndsjsfbhqs();
+      this.zfqyndsjsfbhqs();
       //  const map = new AMap.Map('map', {
       // 	resizeEnable: true,
       // 	center: [116.397128, 39.916527], // 设置中心坐标
       // 	zoom: 10, // 设置缩放级别
       // 	viewMode: '3D' // 3D视图
       // 	});
-	})
+    });
   },
   methods: {
-	sjzl () { // 数据总览
+    initMap() {
+      var VUE = this;
+      VUE.map = new AMap.Map("container", {
+        resizeEnable: true,
+        center: [116.481181, 39.989792],
+        zoom: 13,
+      });
+
+      console.log(VUE.map, "map");
+      addMarker();
+
+      //添加marker标记
+      function addMarker() {
+        VUE.map.clearMap();
+        var marker = new AMap.Marker({
+          map: VUE.map,
+          position: [116.481181, 39.989792],
+          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="">
+						<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>`;
+
+      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();
+    //   };
+    },
+	closeInfo() {
+        this.infoWindow.close();
+      },
+    sjzl() {
+      // 数据总览
       request({
-			url: 'api/homePage/incubatorOverview?size=9',
-			method: 'get'
-		})	.then((res) => {
+        url: "api/homePage/incubatorOverview?size=9",
+        method: "get",
+      }).then((res) => {
         this.sjzlList = res.body || [];
       });
     },
-	srph () { // 收入排行
+    srph() {
+      // 收入排行
       request({
-			url: 'api/homePage/incubatorLeaderboard',
-			method: 'get'
-		})	.then((res) => {
+        url: "api/homePage/incubatorLeaderboard",
+        method: "get",
+      }).then((res) => {
         const list = res.body || [];
-			var colors = [
-              "#ff8371",
-              "#08b2c0",
-              "#427fff",
-              "#8dbffa",
-              "#b2e2fe",
-            ];
+        var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"];
         var chartData = Highchart.formatSeriesList(list, {
           value: "value",
           colors: colors,
@@ -210,14 +273,19 @@ export default {
           },
           isSeriesData: true,
         };
-            Highchart.template.rich(document.querySelector('.srphWrapper'), list, opts);
+        Highchart.template.rich(
+          document.querySelector(".srphWrapper"),
+          list,
+          opts
+        );
       });
     },
-	qycxcysjfx () { //企业创新创业数据分析
+    qycxcysjfx() {
+      //企业创新创业数据分析
       request({
-			url: 'api/homePage/enterpriseInnovationAnalysis',
-			method: 'get'
-		})	.then((res) => {
+        url: "api/homePage/enterpriseInnovationAnalysis",
+        method: "get",
+      }).then((res) => {
         const list = res.body || [];
         var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"];
         var seriesFormat = Highchart.formatSeriesList(list, {
@@ -273,14 +341,19 @@ export default {
           isSeriesData: true,
         };
         // Highchart.template.pie(wrap34, list, opts);
-            Highchart.template.rich(document.querySelector('.qycxcysjfxWrapper'), list, opts);
+        Highchart.template.rich(
+          document.querySelector(".qycxcysjfxWrapper"),
+          list,
+          opts
+        );
       });
     },
-	fhqfhqysjfx () { //孵化器孵化企业数据分析
+    fhqfhqysjfx() {
+      //孵化器孵化企业数据分析
       request({
-			url: 'api/homePage/incubatorEnterpriseNumber',
-			method: 'get'
-		})	.then((res) => {
+        url: "api/homePage/incubatorEnterpriseNumber",
+        method: "get",
+      }).then((res) => {
         const list = res.body || [];
         var opts = {
           chartConfig: {
@@ -297,14 +370,19 @@ export default {
           },
         };
         // Highchart.template.rich(wrap35, list, opts);
-            Highchart.template.rich(document.querySelector('.fhqfhqysjfxWrapper'), list, opts);
+        Highchart.template.rich(
+          document.querySelector(".fhqfhqysjfxWrapper"),
+          list,
+          opts
+        );
       });
     },
-	fhqyndsjsfbhqs () { //孵化企业年度上缴税费变化趋势
+    fhqyndsjsfbhqs() {
+      //孵化企业年度上缴税费变化趋势
       request({
-			url: 'api/homePage/incubatorTaxTrend',
-			method: 'get'
-		})	.then((res) => {
+        url: "api/homePage/incubatorTaxTrend",
+        method: "get",
+      }).then((res) => {
         let list = res.body || [];
         list = {
           names: [
@@ -437,14 +515,19 @@ export default {
           isSeriesData: true,
         };
         // Highchart.template.rich(wrap35, list, opts);
-            Highchart.template.rich(document.querySelector('.fhqyndsjsfbhqsWrapper'), list, opts);
+        Highchart.template.rich(
+          document.querySelector(".fhqyndsjsfbhqsWrapper"),
+          list,
+          opts
+        );
       });
     },
-	zfqyndsjsfbhqs () { // 在孵企业年度上缴税费变化趋势
+    zfqyndsjsfbhqs() {
+      // 在孵企业年度上缴税费变化趋势
       request({
-			url: 'api/homePage/incubatorTaxTrend',
-			method: 'get'
-		})	.then((res) => {
+        url: "api/homePage/incubatorTaxTrend",
+        method: "get",
+      }).then((res) => {
         let list = res.body || [];
         list = {
           names: [
@@ -577,27 +660,62 @@ export default {
           isSeriesData: true,
         };
         // Highchart.template.rich(wrap35, list, opts);
-            Highchart.template.rich(document.querySelector('.zfqyndsjsfbhqsWrapper'), list, opts);
+        Highchart.template.rich(
+          document.querySelector(".zfqyndsjsfbhqsWrapper"),
+          list,
+          opts
+        );
       });
     },
 
-
-	amapOptions(cmap){
+    amapOptions(cmap) {
       var self = this;
+      var VUE = this;
       return {
-			zoom:13,
-			center:[122.050189, 37.515189],
+        zoom: 13,
+        center: [122.050189, 37.515189],
         //showLabel: true,
         //pitch: 40,
-			onload: function(cmap){
-				console.log('onload ________________ ', self, cmap);
+        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());
+            // });
+          }
         },
-			click: function(e, cmap){
-				console.log('click ________________ ', cmap);
+        click: function (e, cmap) {
+          console.log("click ________________ ", cmap);
         },
       };
     },
+
     // 首页
     module0(m, t, f, dmIndex, view) {
       var self = this,
@@ -690,9 +808,7 @@ export default {
 
         // 孵化总收入排行榜
         (m.reqSrph = function () {
-          m.srph().then(function (list) {
-            
-          });
+          m.srph().then(function (list) {});
         })();
 
         // md4
@@ -1421,6 +1537,11 @@ export default {
 </script>
 
 <style lang="scss" scope>
+#container {
+  height: 100%;
+  width: 100%;
+  background-color: #29557a;
+}
 @font-face {
   font-family: "diget year";
   src: url("~@/assets/fonts/DS-Digital.ttf");
@@ -1554,7 +1675,7 @@ export default {
           justify-content: center;
           pointer-events: none;
           h2 {
-            font-size: 0.4rem;
+            font-size: 0.4534rem;
             line-height: 1;
             margin: 0.23rem 0 0 0rem;
             font-weight: bold;
@@ -2163,10 +2284,78 @@ export default {
 
   /* 弹窗背景图  */
   .popupBgImage {
+    color: #fff;
+    width: 3.86rem;
+    height: 3.66rem;
+    font-size: 0.12rem;
+    padding: 0.1rem;
     background-image: url("/static/images/frame1.png");
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 100% 100%;
+    position: relative;
+    button {
+      width: 1.5rem;
+      height: 0.4rem;
+      background: #00d2ff;
+      border-radius: 0.04rem;
+      font-size: 0.19rem;
+      color: #fff;
+      border: none;
+      outline: none;
+      margin-left: 50%;
+      margin-top: 0.14rem;
+      transform: translateX(-50%);
+      cursor: pointer;
+    }
+    dl {
+      padding: 0 0.4rem;
+    }
+    dd {
+      margin-top: 0.08rem;
+      margin-bottom: 0.08rem;
+    }
+    dd > font {
+      // 标题
+      font-size: 0.19rem;
+      color: #00f0ff;
+    }
+    dd > span {
+      // 值
+      font-size: 0.19rem;
+      color: #fff;
+    }
+    i {
+      background-image: url("~@/assets/images/dpNew/close_icon.png");
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 100% 100%;
+      display: block;
+      width: 0.21rem;
+      height: 0.21rem;
+      position: absolute;
+      top: 0.21rem;
+      right: 0.21rem;
+    }
+    h4 {
+      width: 2.58rem;
+      height: 0.5rem;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0 auto;
+      margin-top: 0.21rem;
+      // 		background: linear-gradient(90deg, rgba(4,205,255,0) 0%, rgba(4,205,255,0.98) 51%, rgba(4,205,255,0) 100%);
+      // opacity: 0.82;
+      font-family: SimHei;
+      font-weight: 400;
+      font-size: 0.24rem;
+      color: #ffffff;
+
+      background-image: url("~@/assets/images/dpNew/title2.png");
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 100% 100%;
+    }
   }
 
   /* 加载动画 */