添-地图-点位

components/contentBox/index.tsx

-import React from 'react';
-import { Box } from './styled';
-import Left from './left';
-import Right from './right';
-import {BoxProps} from './interface';
-export default function ContentBox(props:BoxProps) {
-    console.log(props);
+import React from "react";
+import { Box } from "./styled";
+import Left from "./left";
+import Right from "./right";
+import { BoxProps } from "./interface";
+export default function ContentBox(props: BoxProps) {
   return (
     <Box>
-        <Left boxIndex={props.boxIndex} leftRenderDom={props.leftRenderDom} leftcontentstyle={props.leftcontentstyle}/> 
-        <Right rightRenderDom={props.rightRenderDom}/>
+      <Left
+        boxIndex={props.boxIndex}
+        leftRenderDom={props.leftRenderDom}
+        leftcontentstyle={props.leftcontentstyle}
+      />
+      <Right rightRenderDom={props.rightRenderDom} />
     </Box>
-  )
+  );
 }

pages/home/waterfallFlowBody/components/map/api/index.tsx

-import request, { Response } from '~/api/request';
+import request, { Response } from "~/api/request";
 
 export interface PositioningInfoParams {
-  lat:number,
-  lon:number
+  lat: number;
+  lon: number;
 }
 
 export interface Entiy {
-          dizhi: string,
-          jd: number,
-          wd: number,
-          range: number
+  dizhi: string;
+  jd: number;
+  wd: number;
+  range: number;
 }
 
 export interface ListPageJobInfoResp {
-      id: number,
-      adCode: string,
-      province: string,
-      locationList: Array<Entiy>
+  id: number;
+  adCode: string;
+  province: string;
+  locationList: Array<Entiy>;
 }
 
-
 export default {
   //web-作业服务-分页
-  listPositioningInfo: (params: PositioningInfoParams): Promise<Response<ListPageJobInfoResp>> => {
-    return request('/release/website/getWebsiteList', 'get', params )
+  listPositioningInfo: (
+    params: PositioningInfoParams
+  ): Promise<Response<ListPageJobInfoResp[]>> => {
+    return request("/release/website/getWebsiteList", "get", params);
   },
-}
+};
\ No newline at end of file

pages/home/waterfallFlowBody/components/map/index.tsx

 import React, { Component, useEffect, useState } from "react";
 import { Box } from "./styled";
 import api from "./api";
-
 export default function MapComponent() {
   const [mapItem, setMapItem] = useState(0);
   let map: any;
@@ -15,14 +14,14 @@ export default function MapComponent() {
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       })
-        .then((AMap) => {
+        .then(async (AMap) => {
           map = new AMap.Map("container", {
             // 设置地图容器id
             viewMode: "3D", // 是否为3D地图模式
-            zoom: 11, // 初始化地图级别
+            zoom: 9, // 初始化地图级别
             center: [113.93029, 22.53291], // 初始化地图中心点位置
           });
-          mapEntiy(0, AMap);
+          // await mapEntiy(0, AMap);
         })
         .catch((e) => {
           console.log(e);
@@ -35,55 +34,117 @@ export default function MapComponent() {
     (async () => {
       await init();
     })();
+    console.log("渲染6666666666666666666666");
   }, []);
 
-  const addEntiy = (AMap: any, lan: any, lon: any) => {
-    // let lngLat = new AMap.LngLat(lan.trim(), lon.trim())
-    // // 转高德坐标系
-    // AMap.convertFrom(lngLat, 'gps', function (info, result) {
-    //   lngLat = result.locations[0]// 转换后的坐标位置
-    //   var marker = new AMap.Marker({
-    //     position: lngLat,
-    //     map
-    //   })
-    //   AMap.event.addListener(marker, 'click', (e) => {
-    //     map.AMapUI.loadUI(['overlay/SimpleInfoWindow'], function (SimpleInfoWindow) {
-    //       var infoWindow = new SimpleInfoWindow({
-    //         infoTitle: '<strong>这是标题</strong>',
-    //         infoBody: '<p>这是信息</p>',
-    //         offset: new AMap.Pixel(0, -20),
-    //         autoMove: true
-    //       })
-    //       infoWindow.open(map, e.target.getPosition())
-    //       // 最坑的就是这一步了，他的infowindow没有点击事件，所以infoWindow.get$Container()会返回这个infowindow（jquery）对象
-    //       let infoEle = infoWindow.get$Container()
-    //       //给infowindow添加点击事件，并在回调函数中处理业务或者跳转等
-    //       infoEle.on('click', (e) => {
-    //         // router.push({name: 'proinfo', params: pro})
-    //       })
-    //     })
-    //   })
-    // })
-  };
+  const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
+    if (!AMap) return;
+    const marker = new AMap.Marker({
+      map: map,
+      position: [lan, lon],
+      title: dizhi,
+    });
+    // //鼠标点击marker弹出自定义的信息窗体
+    // AMap.Event.addListener(marker, "click", function () {
+    //   infoWindow.open(map, marker.getPosition());
+    // });
 
-  const mapEntiy = (index: number, AMap?: any) => {
-    api
-      .listPositioningInfo({
-        lat: 113.944825,
-        lon: 22.573664,
-      })
-      .then((res) => {
-        // const list = res.result
-        //   ?.map((item) => item.locationList)
-        //   .flat()
-        //   .filter((item: { dizhi: string }) => item.dizhi.includes("广东省"));
-        // console.log("ajksbhdkjasgdbjahks", list);
+    // //实例化信息窗体
+    // var title =
+    //     '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
+    //   content = [];
+    // content.push(
+    //   "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
+    // );
+    // content.push("电话：010-64733333");
+    // content.push(
+    //   "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"
+    // );
+    // var infoWindow = new AMap.InfoWindow({
+    //   isCustom: true, //使用自定义窗体
+    //   content: createInfoWindow(title, content.join("<br/>")),
+    //   offset: new AMap.Pixel(16, -15),
+    //   anchor: "bottom-center",
+    // });
+
+    // //构建自定义信息窗体
+    // function createInfoWindow(title, content) {
+    //   var info = document.createElement("div");
+    //   info.className = "custom-info input-card content-window-card";
+
+    //   //可以通过下面的方式修改自定义窗体的宽高
+    //   //info.style.width = "400px";
+    //   // 定义顶部标题
+    //   var top = document.createElement("div");
+    //   var titleD = document.createElement("div");
+    //   var closeX = document.createElement("img");
+    //   top.className = "info-top";
+    //   titleD.innerHTML = title;
+    //   closeX.src = "https://webapi.amap.com/images/close2.gif";
+    //   closeX.onclick = closeInfoWindow;
+
+    //   top.appendChild(titleD);
+    //   top.appendChild(closeX);
+    //   info.appendChild(top);
+
+    //   // 定义中部内容
+    //   var middle = document.createElement("div");
+    //   middle.className = "info-middle";
+    //   middle.style.backgroundColor = "white";
+    //   middle.innerHTML = content;
+    //   info.appendChild(middle);
 
-        // list.map((item) => {
-        //   addEntiy(AMap, item.jd, item.wd);
-        // });
-        setMapItem(index);
+    //   // 定义底部内容
+    //   var bottom = document.createElement("div");
+    //   bottom.className = "info-bottom";
+    //   bottom.style.position = "relative";
+    //   bottom.style.top = "0px";
+    //   bottom.style.margin = "0 auto";
+    //   var sharp = document.createElement("img");
+    //   sharp.src = "https://webapi.amap.com/images/sharp.png";
+    //   bottom.appendChild(sharp);
+    //   info.appendChild(bottom);
+    //   return info;
+    // }
+
+    // //关闭信息窗体
+    // function closeInfoWindow() {
+    //   map.clearInfoWindow();
+    // }
+
+    return marker;
+  };
+
+  const mapEntiy = async (index: number, AMap?: any) => {
+    // api
+    //   .listPositioningInfo({
+    //     lat: 113.944825,
+    //     lon: 22.573664,
+    //   })
+    //   .then((res) => {});
+    const res = await api.listPositioningInfo({
+      lat: 113.944825,
+      lon: 22.573664,
+    });
+    const list = res.result
+      ?.map((item) => item.locationList)
+      .flat()
+      .filter((item: { dizhi: string }) => item.dizhi.includes("广东省"));
+    const markerList: any = [];
+    if (list?.length) {
+      list?.map((item) => {
+        const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
+        markerList.push(EntiyValue);
       });
+      map?.add(markerList);
+    }
+    console.log(map, "地图实例++++++++++++++++++++++++++++++");
+
+    if (index) {
+      map?.panTo([list![index].jd, list![index].wd]);
+    }
+
+    setMapItem(index);
   };
 
   return (

pages/home/waterfallFlowBody/index.tsx

@@ -51,7 +51,6 @@ export default function WaterfallFlowBody() {
     "泰康保险",
     "华夏保险",
     "阳光保险",
-    "友邦保险",
     "富德生命人寿",
     "中邮人寿",
     "前海人寿",
@@ -285,12 +284,22 @@ export default function WaterfallFlowBody() {
 
   const rightDom = (list: Array<NewsPageType>) => {
     return (
-      <div key={1} className="right-box-item right-item">
-        <div className="title">行业新闻</div>
+      <div key={1009} className="right-box-item right-item">
+        <div className="title">
+          行业新闻
+          <div
+            className="title-label"
+            onClick={() => router.push("/projectInfo")}
+          >
+            &gt;
+          </div>
+        </div>
         <div className="body">
           {list?.map((item) => (
             <div key={item.id} className="body-item">
-              <div className="item-label">{item.newsTitle}</div>
+              <div className="item-label" title={item.newsTitle}>
+                {item.newsTitle}
+              </div>
               <div className="item-image">
                 <Image
                   className="item-image"
@@ -313,8 +322,16 @@ export default function WaterfallFlowBody() {
 
   const rightDom2 = (list: Array<NewsTenderType>) => {
     return (
-      <div key={2} className="right-box-item right-item-second">
-        <div className="title">招标快讯</div>
+      <div key={1008} className="right-box-item right-item-second">
+        <div className="title">
+          招标快讯
+          <div
+            className="title-label"
+            onClick={() => router.push("/projectInfo")}
+          >
+            &gt;
+          </div>
+        </div>
         <div className="body">
           {list?.map((item) => (
             <div key={item.id} className="body-item">
@@ -342,13 +359,13 @@ export default function WaterfallFlowBody() {
         boxIndex={2}
         leftRenderDom={{
           columns: [
-            { noFor: true, element: <RotationChart /> },
+            { noFor: true, element: <RotationChart key={45645645} /> },
             ...leftDomList,
           ],
         }}
         rightRenderDom={{
           columns: [
-            { element: <Map /> },
+            { element: <Map key={1001} /> },
             { element: rightTopDomList as JSX.Element },
             { element: rightBottomDomList as JSX.Element },
           ],

pages/home/waterfallFlowBody/styled.tsx

@@ -76,10 +76,16 @@ export const Box = styled.div`
       font-weight: bold;
       color: #000000;
       line-height: 25px;
+      &-label {
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 400;
+      }
     }
     .body {
       height: 284px;
-      overflow-y: auto;
+      overflow-y: hidden;
       &-item {
         display: flex;
         justify-content: space-between;
@@ -93,7 +99,12 @@ export const Box = styled.div`
           font-family: MicrosoftYaHei;
           color: #323232;
           line-height: 21px;
-          word-wrap: break-word;
+          overflow: hidden; //溢出内容隐藏
+          text-overflow: ellipsis; //文本溢出部分用省略号表示
+          display: -webkit-box; //特别显示模式
+          -webkit-line-clamp: 2; //行数
+          line-clamp: 2;
+          -webkit-box-orient: vertical; //盒子中内容竖直排列
         }
         .item-image {
           width: 96px;
@@ -117,10 +128,16 @@ export const Box = styled.div`
       font-weight: bold;
       color: #000000;
       line-height: 25px;
+      &-label {
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 16px;
+        font-weight: 400;
+      }
     }
     .body {
       height: 448px;
-      overflow-y: auto;
+      overflow-y: hidden;
       &-item {
         display: flex;
         justify-content: space-between;
@@ -137,12 +154,12 @@ export const Box = styled.div`
           word-wrap: break-word;
           .label-top {
             text-overflow: -o-ellipsis-lastline;
-            overflow: hidden;				//溢出内容隐藏
-            text-overflow: ellipsis;		//文本溢出部分用省略号表示
-            display: -webkit-box;			//特别显示模式
-            -webkit-line-clamp: 2;			//行数
-            line-clamp: 2;					
-            -webkit-box-orient: vertical;	//盒子中内容竖直排列
+            overflow: hidden; //溢出内容隐藏
+            text-overflow: ellipsis; //文本溢出部分用省略号表示
+            display: -webkit-box; //特别显示模式
+            -webkit-line-clamp: 2; //行数
+            line-clamp: 2;
+            -webkit-box-orient: vertical; //盒子中内容竖直排列
           }
           .label-bottom {
             font-size: 15px;