当前位置：首页 > 前端开发 > 正文内容

React 高德地图进京证（一）

邻居的猫1个月前 (12-09)前端开发934

一、加载问题

用高德地图做了个进京证道路规划的功用，官网也是有 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);