首页 > 其他分享 >React 高德地图 进京证 路线规划 问题小记

React 高德地图 进京证 路线规划 问题小记

时间:2024-08-15 14:49:11浏览次数:11  
标签:map const React AMap marker new null 高德 小记

一、加载问题

用高德地图做了个进京证路线规划的功能,官网也是有 React 代码示例。但是吧,这个Demo有问题,地图是能加载成功,但是其他功能再用 map 这个变量肯定不行,果不其然是null,处理也简单,把公共变量都管理起来就行了。

const [map, setMap] = useState(null);
const [AMap, setAMap] = useState(null);
const [driving, setDriving] = useState(null);
const [mass, setMass] = useState(true);

useEffect(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "「你申请的安全密钥」",
    };
    AMapLoader.reset();
    AMapLoader.load({
        key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins: ["AMap.Driving"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['...','...']
    }).then((_AMap) => {
        const _map = new _AMap.Map("container", {
            resizeEnable: true,
            viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D'
            zoom: 11, // 初始化地图层级
            center: [116.397428, 39.93000] // 初始化地图中心点
        });
        _map.on('complete', () => {
            setAMap(_AMap)
        });

        setMap(_map);

        const driving = new _AMap.Driving({
            map: _map
        });
        setDriving(driving);
		
    }).catch((e) => {
        console.log(e);
    });
    return () => {
        map?.destroy();
    };
}, [])

二、标注点问题

普通点标记多了会很慢,高德提供了海量点标记功能(摄像头太多了),如果文字都显示是又慢又乱,所有单独绑定单击事件,并用 Text 文本标记。

const camera = []; //你的数组
const datas = [];
const styles = [{
    url: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    anchor: 'bottom-center',
    size: new AMap.Size(21, 27),
    zIndex: 1,
}]
for (let index = 0; index < camera.length; index++) {
    const c = camera[index];
    datas.push({
        lnglat: c.position,
        name: c.name,
        style: 0 //该数据的取值为样式数组对应的对象索引
    });
}
// 海量标记摄像头
const _mass = new AMap.MassMarks(datas, {
    style: styles
})
let marker = null;
_mass.on('click', (e) => {
    if (marker === null || e.data.lnglat !== marker._opts.position) {
        if (marker !== null) {
            map.remove(marker)
        }
        marker = new AMap.Text({
			map: map,
			position: e.data.lnglat,
			anchor: 'top-center',
			offset: [0, -60],
			text: e.data.name,
			style: {
				"font-Size": "14px",
				"padding": "5px"
			},
			zIndex: 2
		});
    }
});
_mass.setMap(map)
setMass(_mass);

三、效率问题

目前规划路线的效率有点慢,主要是摄像头过多,按步全量循环算路太耗时,下一步更新要把所有的摄像头分区,按线路走向过滤算路,理论上能减少一半以上的计算时间,期待的搓搓小手。大家感兴趣的可以在微信公众号体验一下,希望可以帮助到有需要的人。

标签:map,const,React,AMap,marker,new,null,高德,小记
From: https://www.cnblogs.com/WinterSir/p/18360872

相关文章

  • windows-g下载js库使用时报错:无法加载文件 D:\code\node\node_global\create-reac
    无法加载文件D:\code\node\node_global\create-react-app.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。当我们在windows上-g(全局)安装一个js库时,执行会报这个错误,然后我们看......
  • 使用 TypeScript 在 React JS 中进行路由
    一.介绍单页应用程序(SPA)中的路由支持在视图之间导航,而无需重新加载应用程序。ReactRouter是React应用程序中路由的标准库。本文简要概述了使用TypeScript设置路由的方法。二.设置项目创建一个新的React项目npxcreate-react-appreact-router-ts--template......
  • react in cdn
    index.html:<!doctypehtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width"/><title>Ariakit</title></head><body>......
  • 如何使用React Router--01
    一、ReactRouter基础1.1安装ReactRouter要在项目中使用ReactRouter,首先需要安装:npminstallreact-router-dom 安装完成后,你可以在应用中使用BrowserRouter、Route、Switch等组件来实现路由功能。1.2基本路由配置最简单的路由配置通常包含以下几个部分:Brows......
  • 20 道 React 最新面试题及详细答案
    20道React最新面试题及详细答案**1:谈谈React中的受控组件和非受控组件的区别,并举例说明。****2:解释React中的ContextAPI以及它的优缺点。****3:React中如何实现代码分割(CodeSplitting)?****4:描述React中的错误边界(ErrorBoundaries)以及如何使用?****5:解释......
  • React 框架原理的八点
    React框架原理深入剖析React是一个用于构建用户界面的JavaScript库,它以其高效的渲染机制、组件化的开发模式和创新的设计理念在前端开发领域占据了重要地位。一、虚拟DOM(VirtualDOM)虚拟DOM是React性能优化的核心策略之一。在传统的Web开发中,每当数据发生变化......
  • React Diff
    ReactDiff流程前提在React的render阶段的beginWorl方法中对于update的组件会通过reconcileChildFibers方法将当前组件与该组件在上次更新时对应的Fiber节点进行比较(即diff算法),将比较的结果生成新的Fiber节点,即创建workInProgressfiber的过程。其中,在某一时刻,一个DOM节点最多......
  • 使用Vite+TS+Antd构建React项目
    安装Vitenpminstall-gvite#yarnglobaladdvite创建React项目vitecreatemy-react-app--templatereact-ts安装ReactRouternpminstallreact-router-dom@types/react-router-dom#yarnaddreact-router-dom@types/react-router-dom安装AntDesign......
  • Vue.js 项目中集成高德地图 API
    要在Vue.js项目中集成高德地图API,你可以按照以下步骤操作:###第一步:引入高德地图API首先,你需要在你的Vue项目中引入高德地图的JSAPI。可以通过在HTML文件中直接引入CDN链接或者使用npm安装的方式。####通过CDN引入:在`public/index.html`文件中的`<head......
  • react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题
    react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题名字还是土一点好关注IP属地:上海0.272018.01.2114:26:36字数154阅读4,027一直没有找到有关于 react-navigation 处理app各种不同状态需要默认不同首页的例子,于是只能自己写了。整个......