+ {/* 地图容器元素 */}
+
+
+ )
+ }
+}
+
diff --git a/src/jjt/Map2 copy.jsx b/src/jjt/Map2 copy.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..78303cec4828728b47c78daf313882b4dbaabbc4
--- /dev/null
+++ b/src/jjt/Map2 copy.jsx
@@ -0,0 +1,245 @@
+import React, { useState, useEffect } from "react";
+import { NavBar } from "react-vant"; //导航栏
+import { useNavigate } from "react-router-dom";
+import "./scss/Map2.scss";
+import { ZoomControl } from "react-bmapgl";
+import { CityListControl } from "react-bmapgl";
+import axios from "./untils/Axios";
+// import { Map, Marker, NavigationControl, InfoWindow } from "react-bmapgl";
+export default function Map2() {
+ let nav = useNavigate();
+ var data = [
+ {
+ lat: 39.9087,
+ lng: 116.3974,
+ category: '一级分类1',
+ subCategories: [
+ { name: '二级分类1-1', description: '这是二级分类1-1的描述' },
+ { name: '二级分类1-2', description: '这是二级分类1-2的描述' }
+ ]
+ },
+ {
+ lat: 39.9187,
+ lng: 116.4074,
+ category: '一级分类2',
+ subCategories: [
+ { name: '二级分类2-1', description: '这是二级分类2-1的描述' },
+ { name: '二级分类2-2', description: '这是二级分类2-2的描述' }
+ ]
+ }
+];
+ let [user, setUser] = useState([]); //用户信息
+ let [userLocation, setUserLocation] = useState([]); //用户位置信息
+ let getData = async () => {
+ let { data } = await axios.get("/jjt/userdata");
+ setUser(data.userData);
+ setUserLocation(data.user);
+ console.log(data.userData);
+ console.log(data.usermessage);
+
+ // let mapFun = (user,userLocation) => {
+ const { BMap } = window;
+ const map = new BMap.Map("container");
+ const point = new BMap.Point(115.0025864756, 38.52271243778); // //116.404, 39.915 115.0025864756, 38.52271243778
+ map.centerAndZoom(point, 10);
+ var opts = { type: "BMAP_NAVIGATION_CONTROL_SMALL" }; //地图缩放
+ map.addControl(new BMap.NavigationControl(opts)); //地图缩放
+ // map.addControl(new BMap.ScaleControl()); //地图比例尺
+ map.addControl(new BMap.OverviewMapControl()); //地图缩略图
+ map.addControl(new BMap.MapTypeControl()); //地图类型
+ var marker = new BMap.Marker(point); // 创建标注
+ map.addOverlay(marker); // 将标注添加到地图中
+ // var bounds = map.getBounds();
+ // var lngSpan = bounds.maxX - bounds.minX;
+ // var latSpan = bounds.maxY - bounds.minY;
+ // console.log("您的位置dfs：", lngSpan, latSpan);
+ // let aaa = [
+ // [116.399, 39.91],
+ // [116.395, 39.91],
+ // [116.39, 39.91],
+ // ];
+
+ // for (var i = 0; i < data.userData.length; i++) {
+ // var points = new BMap.Point(data.user[i][0], data.user[i][1]);
+ // console.log(data.user[i][0], data.user[i][1], 11111);
+ // marker = new BMap.Marker(points); // 创建标注
+ // map.addOverlay(marker);
+ // //点击标注
+ // // 为每个标注添加弹出窗口
+ // // marker.addEventListener("click", function (e) {
+ // // console.log(e.target,969694884884845)
+ // // var opts = {
+ // // width: 200, // 信息窗口宽度
+ // // height: 100, // 信息窗口高度
+ // // title: e.target.point.title, // 信息窗口标题
+ // // };
+ // // var infoWindow = new BMap.InfoWindow(
+ // // "地址：" + e.target.point.title,
+ // // opts
+ // // );
+ // // map.openInfoWindow(infoWindow, e.target.point); // 开启信息窗口
+ // // });
+
+ // var infoWindow = new BMap.InfoWindow(`
`);
+ // marker.addEventListener('click', function() {
+ // this.openInfoWindow(infoWindow);
+ // });
+ // }
+ // 添加标记和信息窗口
+ data.usermessage.forEach(function(item) {
+ var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
+ map.addOverlay(marker);
+
+ // 构建信息窗口内容
+ var infoContent = `
${item.name}`;
+ item.children.forEach(function(subItem) {
+ infoContent += `- 在售书名: ${subItem.name}
`;
+ });
+ infoContent += `
`;
+
+ var infoWindow = new BMap.InfoWindow(infoContent);
+ marker.addEventListener('click', function() {
+ this.openInfoWindow(infoWindow);
+ // 设置点击事件
+ setTimeout(function() {
+ var subCategoryLinks = document.querySelectorAll('.sub-category');
+ subCategoryLinks.forEach(function(link) {
+ link.addEventListener('click', function(e) {
+ e.preventDefault();
+ var index = e.target.getAttribute('data-index');
+ alert('点击了二级分类: ' + item.subCategories[index].name);
+ });
+ });
+ }, 0);
+ });
+});
+
+ // 定义多个div覆盖物的坐标和内容
+ console.log(data.userData,8989);
+ var ComplexCustomOverlays =data.userData;
+ // 自定义覆盖物类
+ function ComplexCustomOverlay(point,bookname,name,bookimg) {
+ this._point = point;
+ this._bookname = bookname;
+ this._name = name;
+ this._bookimg = bookimg;
+
+ }
+ ComplexCustomOverlay.prototype = new BMap.Overlay();
+ ComplexCustomOverlay.prototype.initialize = function (map) {
+ this._map = map;
+ var div = (this._div = document.createElement("div"));
+ div.className = "info";
+ // div.innerHTML = this._bookname;
+ div.style.background = "rgba(255,255,255,0.7)";
+ div.style.width = "100px";
+ div.style.height = "100px";
+ div.style.position = "absolute";
+ var p = (this._span = document.createElement("p")); // p标签存放用户名
+ p.innerHTML = this._name ;
+ p.style.position = "absolute";
+ p.style.width = "40px";
+ p.style.height = "40px";
+ // img.style.top = "-24px";
+ // img.style.left = "-22px";
+ // img.style.marginLeft = "-30px";
+ p.style.zIndex = "1";
+ p.style.backgroundSize = "contain";
+ div.appendChild(p);
+ var img = (this._span = document.createElement("img")); // img标签存放图书图片
+ img.src = this._bookimg ;
+ img.style.position = "absolute";
+ img.style.width = "40px";
+ img.style.height = "40px";
+ img.style.top = "40px";
+ // img.style.left = "-22px";
+ // img.style.marginLeft = "-30px";
+ img.style.zIndex = "1";
+ img.style.backgroundSize = "contain";
+ div.appendChild(img);
+ var p2 = (this._span = document.createElement("p")); // p标签存放图书名
+ p2.innerHTML = this._bookname ;
+ p2.style.position = "absolute";
+ p2.style.width = "100px";
+ p2.style.height = "100px";
+ p2.style.top = "80px";
+ // img.style.left = "-22px";
+ // img.style.marginLeft = "-30px";
+ p2.style.zIndex = "1";
+ p2.style.backgroundSize = "contain";
+ div.appendChild(p2);
+ map.getPanes().markerPane.appendChild(div);
+ return div;
+ };
+ ComplexCustomOverlay.prototype.draw = function () {
+ var position = this._map.pointToOverlayPixel(this._point);
+ this._div.style.left = position.x + "px"; // 调整位置
+ this._div.style.top = position.y + "px"; // 调整位置
+ };
+
+ // 循环添加多个div覆盖物
+ for (var i2 = 0; i2 < ComplexCustomOverlays.length; i2++) {
+ var overlay = ComplexCustomOverlays[i2];
+
+ var point4 = new BMap.Point(overlay.lng, overlay.lat);
+
+ var mark = new ComplexCustomOverlay(point4,overlay.bookname,overlay.name,overlay.bookimg);
+ console.log(ComplexCustomOverlay,858585);
+ map.addOverlay(mark);
+
+ }
+ // var geolocation = new BMap.Geolocation();
+ // geolocation.getCurrentPosition(function (r) {
+ // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
+ // var mk = new BMap.Marker(r.point);
+ // map.addOverlay(mk);//添加标注点
+ // map.panTo(r.point);//标注样式
+ // // alert('您的位置：'+r.point.lng+','+r.point.lat);
+ // console.log("您的位置：" + r.point.lng + "," + r.point.lat);
+ // } else {
+ // // alert('failed'+this.getStatus());
+ // console.log("failed" + this.getStatus());
+ // }
+ // });
+
+ // var geolocation = new BMap.Geolocation();
+ // // 开启SDK辅助定位
+ // geolocation.enableSDKLocation();
+ // geolocation.getCurrentPosition(function (r) {
+ // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
+ // var mk = new BMap.Marker(r.point);
+ // map.addOverlay(mk);
+ // map.panTo(r.point);
+ // // alert('您的位置：'+r.point.lng+','+r.point.lat);
+ // console.log("您的位置：" + r.point.lng + "," + r.point.lat);
+ // } else {
+ // // alert('failed'+this.getStatus());
+ // console.log("failed" + this.getStatus());
+ // }
+ // });
+ // };
+ };
+ useEffect(() => {
+ getData();
+ }, []);
+ return (
+
+
+ nav("/jjthome")}
+ onClickRight={() => console.log("按钮")}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/src/jjt/Map2.jsx b/src/jjt/Map2.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..377096880387a079205bad503f0069a285e9820e
--- /dev/null
+++ b/src/jjt/Map2.jsx
@@ -0,0 +1,249 @@
+import React, { useState, useEffect } from "react";
+import { NavBar } from "react-vant"; //导航栏
+import { useNavigate } from "react-router-dom";
+import "./scss/Map2.scss";
+import { ZoomControl } from "react-bmapgl";
+import { CityListControl } from "react-bmapgl";
+import axios from "./untils/Axios";
+// import { Map, Marker, NavigationControl, InfoWindow } from "react-bmapgl";
+export default function Map2() {
+ let nav = useNavigate();
+ var data = [
+ {
+ lat: 39.9087,
+ lng: 116.3974,
+ category: '一级分类1',
+ subCategories: [
+ { name: '二级分类1-1', description: '这是二级分类1-1的描述' },
+ { name: '二级分类1-2', description: '这是二级分类1-2的描述' }
+ ]
+ },
+ {
+ lat: 39.9187,
+ lng: 116.4074,
+ category: '一级分类2',
+ subCategories: [
+ { name: '二级分类2-1', description: '这是二级分类2-1的描述' },
+ { name: '二级分类2-2', description: '这是二级分类2-2的描述' }
+ ]
+ }
+];
+ let [user, setUser] = useState([]); //用户信息
+ let [userLocation, setUserLocation] = useState([]); //用户位置信息
+ let getData = async () => {
+ let { data } = await axios.get("/jjt/userdata");
+ setUser(data.userData);
+ setUserLocation(data.user);
+ console.log(data.userData);
+ console.log(data.usermessage);
+
+ // let mapFun = (user,userLocation) => {
+ const { BMap } = window;
+ const map = new BMap.Map("container");
+ const point = new BMap.Point(115.0025864756, 38.52271243778); // //116.404, 39.915 115.0025864756, 38.52271243778
+ map.centerAndZoom(point, 10);
+ var opts = { type: "BMAP_NAVIGATION_CONTROL_SMALL" }; //地图缩放
+ map.addControl(new BMap.NavigationControl(opts)); //地图缩放
+ // map.addControl(new BMap.ScaleControl()); //地图比例尺
+ map.addControl(new BMap.OverviewMapControl()); //地图缩略图
+ map.addControl(new BMap.MapTypeControl()); //地图类型
+ var marker = new BMap.Marker(point); // 创建标注
+ map.addOverlay(marker); // 将标注添加到地图中
+ // var bounds = map.getBounds();
+ // var lngSpan = bounds.maxX - bounds.minX;
+ // var latSpan = bounds.maxY - bounds.minY;
+ // console.log("您的位置dfs：", lngSpan, latSpan);
+ // let aaa = [
+ // [116.399, 39.91],
+ // [116.395, 39.91],
+ // [116.39, 39.91],
+ // ];
+
+ // for (var i = 0; i < data.userData.length; i++) {
+ // var points = new BMap.Point(data.user[i][0], data.user[i][1]);
+ // console.log(data.user[i][0], data.user[i][1], 11111);
+ // marker = new BMap.Marker(points); // 创建标注
+ // map.addOverlay(marker);
+ // //点击标注
+ // // 为每个标注添加弹出窗口
+ // // marker.addEventListener("click", function (e) {
+ // // console.log(e.target,969694884884845)
+ // // var opts = {
+ // // width: 200, // 信息窗口宽度
+ // // height: 100, // 信息窗口高度
+ // // title: e.target.point.title, // 信息窗口标题
+ // // };
+ // // var infoWindow = new BMap.InfoWindow(
+ // // "地址：" + e.target.point.title,
+ // // opts
+ // // );
+ // // map.openInfoWindow(infoWindow, e.target.point); // 开启信息窗口
+ // // });
+
+ // var infoWindow = new BMap.InfoWindow(`
`);
+ // marker.addEventListener('click', function() {
+ // this.openInfoWindow(infoWindow);
+ // });
+ // }
+ // 添加标记和信息窗口
+ data.usermessage.forEach(function(item) {
+ var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
+ map.addOverlay(marker);
+
+ // 构建信息窗口内容
+ var infoContent = `
${item.name}`;
+ item.children.forEach(function(subItem) {
+ infoContent += `- 在售书名:${subItem.name}
`;
+ });
+ infoContent += `
`;
+
+ var infoWindow = new BMap.InfoWindow(infoContent);
+ marker.addEventListener('click', function() {
+ this.openInfoWindow(infoWindow);
+ // 设置点击事件
+ setTimeout(function() {
+ var subCategoryLinks = document.querySelectorAll('.sub-category');
+ // console.log(subCategoryLinks, 89877444444449);
+ subCategoryLinks.forEach(function(link) {
+ link.addEventListener('click', function(e) {
+ e.preventDefault();
+ var index = e.target.getAttribute('data-index');
+ console.log(index, 89877444444449);
+ console.log(item.children.filter(item=>item._id==index)[0].name,111111111111111)
+ // alert('点击了二级分类: ' + index);
+ nav("/jjtsearch",{state:{name:item.children.filter(item=>item._id==index)[0].name}})
+ });
+ });
+ }, 0);
+ });
+});
+
+ // 定义多个div覆盖物的坐标和内容
+ console.log(data.userData,8989);
+ var ComplexCustomOverlays =data.userData;
+ // 自定义覆盖物类
+ function ComplexCustomOverlay(point,bookname,name,bookimg) {
+ this._point = point;
+ this._bookname = bookname;
+ this._name = name;
+ this._bookimg = bookimg;
+
+ }
+ ComplexCustomOverlay.prototype = new BMap.Overlay();
+ ComplexCustomOverlay.prototype.initialize = function (map) {
+ this._map = map;
+ var div = (this._div = document.createElement("div"));
+ div.className = "info";
+ // div.innerHTML = this._bookname;
+ div.style.background = "rgba(255,255,255,0.7)";
+ div.style.width = "100px";
+ div.style.height = "100px";
+ div.style.position = "absolute";
+ var p = (this._span = document.createElement("p")); // p标签存放用户名
+ p.innerHTML = this._name ;
+ p.style.position = "absolute";
+ p.style.width = "40px";
+ p.style.height = "40px";
+ // img.style.top = "-24px";
+ // img.style.left = "-22px";
+ // img.style.marginLeft = "-30px";
+ p.style.zIndex = "1";
+ p.style.backgroundSize = "contain";
+ div.appendChild(p);
+ var img = (this._span = document.createElement("img")); // img标签存放图书图片
+ img.src = this._bookimg ;
+ img.style.position = "absolute";
+ img.style.width = "40px";
+ img.style.height = "40px";
+ img.style.top = "40px";
+ // img.style.left = "-22px";
+ // img.style.marginLeft = "-30px";
+ img.style.zIndex = "1";
+ img.style.backgroundSize = "contain";
+ div.appendChild(img);
+ var p2 = (this._span = document.createElement("p")); // p标签存放图书名
+ p2.innerHTML = this._bookname ;
+ p2.style.position = "absolute";
+ p2.style.width = "100px";
+ p2.style.height = "100px";
+ p2.style.top = "80px";
+ // img.style.left = "-22px";
+ // img.style.marginLeft = "-30px";
+ p2.style.zIndex = "1";
+ p2.style.backgroundSize = "contain";
+ div.appendChild(p2);
+ map.getPanes().markerPane.appendChild(div);
+ return div;
+ };
+ ComplexCustomOverlay.prototype.draw = function () {
+ var position = this._map.pointToOverlayPixel(this._point);
+ this._div.style.left = position.x + "px"; // 调整位置
+ this._div.style.top = position.y + "px"; // 调整位置
+ };
+
+ // 循环添加多个div覆盖物
+ for (var i2 = 0; i2 < ComplexCustomOverlays.length; i2++) {
+ var overlay = ComplexCustomOverlays[i2];
+
+ var point4 = new BMap.Point(overlay.lng, overlay.lat);
+
+ var mark = new ComplexCustomOverlay(point4,overlay.bookname,overlay.name,overlay.bookimg);
+ console.log(ComplexCustomOverlay,858585);
+ map.addOverlay(mark);
+
+ }
+ // var geolocation = new BMap.Geolocation();
+ // geolocation.getCurrentPosition(function (r) {
+ // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
+ // var mk = new BMap.Marker(r.point);
+ // map.addOverlay(mk);//添加标注点
+ // map.panTo(r.point);//标注样式
+ // // alert('您的位置：'+r.point.lng+','+r.point.lat);
+ // console.log("您的位置：" + r.point.lng + "," + r.point.lat);
+ // } else {
+ // // alert('failed'+this.getStatus());
+ // console.log("failed" + this.getStatus());
+ // }
+ // });
+
+ // var geolocation = new BMap.Geolocation();
+ // // 开启SDK辅助定位
+ // geolocation.enableSDKLocation();
+ // geolocation.getCurrentPosition(function (r) {
+ // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
+ // var mk = new BMap.Marker(r.point);
+ // map.addOverlay(mk);
+ // map.panTo(r.point);
+ // // alert('您的位置：'+r.point.lng+','+r.point.lat);
+ // console.log("您的位置：" + r.point.lng + "," + r.point.lat);
+ // } else {
+ // // alert('failed'+this.getStatus());
+ // console.log("failed" + this.getStatus());
+ // }
+ // });
+ // };
+ };
+ useEffect(() => {
+ getData();
+ }, []);
+ return (
+
+
+ nav("/jjthome")}
+ onClickRight={() => console.log("按钮")}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/src/jjt/Search.jsx b/src/jjt/Search.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e355b20ace2d2e9176c225565e1370cdb9da005
--- /dev/null
+++ b/src/jjt/Search.jsx
@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from "react";
+import { Search } from "react-vant"; //搜索
+import { NavBar } from "react-vant"; //导航栏
+import { useNavigate } from "react-router-dom";
+import "./scss/Search.scss";
+import axios from "./untils/Axios";
+import { FloatButton } from "antd";
+import { Toast } from 'react-vant';
+import { FireO } from '@react-vant/icons'
+import { useLocation } from "react-router-dom";
+import { ShoppingCartO } from '@react-vant/icons';
+export default function Searchs() {
+ let loaction = useLocation();
+ let nav = useNavigate();
+ const backgroundStyle = {
+ background: "linear-gradient(to bottom, #B9C9E5, #FFFFFF)",
+ };
+ const hotsearchs = ["Vue", "Python", "React", "布局"]; //热搜
+ const [value, setValue] = useState(""); //搜索
+ const [searhistory, setSearchistory] = useState([1, 2, 32, "顺风耳"]); //搜索历史
+ const [bookData, setBookData] = useState(false); //渲染数据
+ let [olddata, setOldData] = useState([]); //旧数据
+ const error = [1, 2, 3, 4, 5, 6];
+ //获取数据
+ let getdata = async () => {
+ let res = await axios.get("/jjt/hisdatajjt",{params:{name:value}});
+ console.log(res.data.copy);
+ setSearchistory (res.data.copy);
+ setBookData(res.data.ress);
+ setOldData(res.data.ress);
+
+ };
+ let mapsea = ()=>{
+ if(loaction.state.name!==""){
+ setValue(loaction.state.name)
+ getdata();
+ }
+
+ }
+ // 搜索
+ let tosearch = async() => {
+ console.log(value);
+
+ let copy = olddata.filter(item=>item.name.includes(value));
+ console.log(copy,555555555555)
+ if (copy.length==0) {
+ // Toast.fail('暂无数据');
+ Toast({
+ message: '暂无数据',
+ icon:
,
+ })
+ }else{
+ if(value){
+ await axios.post("/jjt/hisaddjjt",{name:value});
+ getdata()
+ }else{
+ getdata()
+ }
+
+ }
+ // getdata()
+ };
+ useEffect(() => {
+ getdata();
+ mapsea()
+ }, []);
+ return (
+
+
+ nav("/jjthome")}
+ onClickRight={() => console.log("按钮")}
+ />
+
+
+
+
{
+ tosearch();
+ }}
+ >
+ 搜索
+
+ }
+ value={value}
+ onChange={setValue}
+ placeholder="请输入搜索关键词"
+ />
+
+ <>
+
+
+
搜索历史
+
+ {searhistory.map((item,index) => (
+
{
+ setValue(item.name);
+ getdata();
+ }}>{item.name}
+ ))}
+
+
+
+
热门搜索
+
+ {hotsearchs.map((item, index) => (
+
{
+ // hotsearch(item);
+ setValue(item);
+ getdata();
+ }}
+ >
+ {item}
+
+ ))}
+
+
+
+ {bookData.length > 0 ? (
+
+
精选课程
+ {bookData.slice(0,9).map((item) => (
+
{}}>
+
+
+
+
+
+ ))}
+
+ ) : (
+
+
精选课程
+ {error.map((item, index) => (
+
+ ))}
+
+ )}
+
+
+
+ 
+ 
+