Skip to content

W
web
提交 e4ed0084 作者: 18928357778
操作

添-地图-点位

上级 62acacca
正在显示 包含 189 行增加 和 91 行删除
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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论