React 高德地图 进京证（一）

一、加载问题

用高德地图做了个进京证路线规划的功能，官网也是有 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);
6. useEffect(() => {
7.     window._AMapSecurityConfig = {
8.         securityJsCode: "「你申请的安全密钥」",
9.     };
10.     AMapLoader.reset();
11.     AMapLoader.load({
12.         key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
13.         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
14.         plugins: ["AMap.Driving"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
15.     }).then((_AMap) => {
16.         const _map = new _AMap.Map("container", {
17.             resizeEnable: true,
18.             viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
19.             zoom: 11, // 初始化地图层级
20.             center: [116.397428, 39.93000] // 初始化地图中心点
21.         });
22.         _map.on('complete', () => {
23.             setAMap(_AMap)
24.         });
26.         setMap(_map);
28.         const driving = new _AMap.Driving({
29.             map: _map
30.         });
31.         setDriving(driving);
32.                
33.     }).catch((e) => {
34.         console.log(e);
35.     });
36.     return () => {
37.         map?.destroy();
38.     };
39. }, [])

复制代码

二、标注点问题

普通点标记多了会很慢，高德提供了海量点标记功能（摄像头太多了），如果文字都显示是又慢又乱，所有单独绑定单击事件，并用 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);

复制代码

三、效率问题

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！