找回密码
 立即注册
首页 业界区 业界 React 高德地图 进京证(一)

React 高德地图 进京证(一)

鞠彗云 2025-6-6 16:12:47
一、加载问题

用高德地图做了个进京证路线规划的功能,官网也是有 React 代码示例。但是吧,这个Demo有问题,地图是能加载成功,但是其他功能再用 map 这个变量肯定不行,果不其然是null,处理也简单,把公共变量都管理起来就行了。
  1. const [map, setMap] = useState(null);
  2. const [AMap, setAMap] = useState(null);
  3. const [driving, setDriving] = useState(null);
  4. const [mass, setMass] = useState(true);
  5. useEffect(() => {
  6.     window._AMapSecurityConfig = {
  7.         securityJsCode: "「你申请的安全密钥」",
  8.     };
  9.     AMapLoader.reset();
  10.     AMapLoader.load({
  11.         key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
  12.         version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
  13.         plugins: ["AMap.Driving"], //需要使用的的插件列表,如比例尺'AMap.Scale',支持添加多个如:['...','...']
  14.     }).then((_AMap) => {
  15.         const _map = new _AMap.Map("container", {
  16.             resizeEnable: true,
  17.             viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D'
  18.             zoom: 11, // 初始化地图层级
  19.             center: [116.397428, 39.93000] // 初始化地图中心点
  20.         });
  21.         _map.on('complete', () => {
  22.             setAMap(_AMap)
  23.         });
  24.         setMap(_map);
  25.         const driving = new _AMap.Driving({
  26.             map: _map
  27.         });
  28.         setDriving(driving);
  29.                
  30.     }).catch((e) => {
  31.         console.log(e);
  32.     });
  33.     return () => {
  34.         map?.destroy();
  35.     };
  36. }, [])
复制代码
二、标注点问题

普通点标记多了会很慢,高德提供了海量点标记功能(摄像头太多了),如果文字都显示是又慢又乱,所有单独绑定单击事件,并用 Text 文本标记。
  1. const camera = []; //你的数组
  2. const datas = [];
  3. const styles = [{
  4.     url: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
  5.     anchor: 'bottom-center',
  6.     size: new AMap.Size(21, 27),
  7.     zIndex: 1,
  8. }]
  9. for (let index = 0; index < camera.length; index++) {
  10.     const c = camera[index];
  11.     datas.push({
  12.         lnglat: c.position,
  13.         name: c.name,
  14.         style: 0 //该数据的取值为样式数组对应的对象索引
  15.     });
  16. }
  17. // 海量标记摄像头
  18. const _mass = new AMap.MassMarks(datas, {
  19.     style: styles
  20. })
  21. let marker = null;
  22. _mass.on('click', (e) => {
  23.     if (marker === null || e.data.lnglat !== marker._opts.position) {
  24.         if (marker !== null) {
  25.             map.remove(marker)
  26.         }
  27.         marker = new AMap.Text({
  28.                         map: map,
  29.                         position: e.data.lnglat,
  30.                         anchor: 'top-center',
  31.                         offset: [0, -60],
  32.                         text: e.data.name,
  33.                         style: {
  34.                                 "font-Size": "14px",
  35.                                 "padding": "5px"
  36.                         },
  37.                         zIndex: 2
  38.                 });
  39.     }
  40. });
  41. _mass.setMap(map)
  42. setMass(_mass);
复制代码
1.jpeg

三、效率问题

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


来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册