React Gaode Maps Beijing Entry Permit Route Planning Issue Notes

I. Loading issues

Using Goldmind to do a Beijing license route planning function, the official website also has Reactcode exampleHowever, this Demo has a problem. However, this Demo has a problem, the map can be loaded successfully, but other functions and then use the map this variable certainly does not work, as a matter of fact is null, processing is also simple, the public variables are managed on the line.

const [map, setMap] = useState(null);
const [AMap, setAMap] = useState(null);

const [mass, setMass] = useState(true); const [mass, setMass] = useState(true)

useEffect(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "The security key you requested","
    };
    (); { window._AMapSecurityConfig
    ({
        key: "", // The requested web developer key, required for the first load call.
        version: "2.0", // Specify the version of JSAPI to load, defaults to 1.4.15.
        plugins: [""], // list of plugins to be used, e.g. scale'', support to add more than one, e.g. ['...'' ,'...']
    }).then((_AMap) => {
        const _map = new _AMap.Map("container", {
            resizeEnable: true,
            viewMode: '2D', // Defaults to 2D mode, set viewMode: '3D' if you want to use 3D mode with pitch angle.
            zoom: 11, // Initialize the map hierarchy
            center: [116.397428, 39.93000] // Initialize map center.
        });
        _map.on('complete', () => {
            setAMap(_AMap)
        });

        setMap(_map);

        const driving = new _AMap.Driving({
            map: _map
        }); setDriving(driving); const driving = new _AMap.
        setDriving(driving); const driving = new _AMap.Driving({ map: _map })

    }).catch((e) => {
        (e);
    });
    return () => {
        map?.destroy();
    }; }
}, [])

II. Question of marking points

Ordinary point marking more will be very slow, high Germany provides a huge amount of point marking function (too many cameras), if the text are displayed is slow and messy, all the separate binding click event, and use Text text marking.

const camera = []; //Your array.
const datas = [];
const styles = [{
    url: '/jsapi_demos/static/demo-center/icons/',
    anchor: 'bottom-center',
    size: new (21, 27),
    zIndex: 1,
}]
for (let index = 0; index < ; index++) {
    const c = camera[index];
    ({
        lnglat: ,
        name: ,
        style: 0 //The value of this data is taken as the object index corresponding to the style array
    });
}
// Massive Marker Camera
const _mass = new (datas, {
    style: styles
})
let marker = null;
_mass.on('click', (e) => {
    if (marker === null || !== marker._opts.position) {
        if (marker !== null) {
            (marker)
        }
        marker = new ({
			map: map,
			position: ,
			anchor: 'top-center',
			offset: [0, -60],
			text: ,
			style: {
				"font-Size": "14px",
				"padding": "5px"
			},
			zIndex: 2
		});
    }
});
_mass.setMap(map)
setMass(_mass);

III. Efficiency issues

At present, the efficiency of planning routes is a little slow, mainly because there are too many cameras, the full amount of cyclic calculation of the road by step is too time-consuming, the next update is to partition all the cameras and filter the calculation of the road by the direction of the line, which theoretically reduces the calculation time by more than half, and the rubbing of the small hands in anticipation. We are interested in WeChat public number can experience, I hope to help people in need.