快捷導(dǎo)航

React?高德地圖進(jìn)京證路線規(guī)劃問(wèn)題記錄(匯總)

更新時(shí)間：2024年08月16日 08:58:51 作者：冬先生

這篇文章主要介紹了React高德地圖進(jìn)京證路線規(guī)劃問(wèn)題小記,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、加載問(wèn)題

用高德地圖做了個(gè)進(jìn)京證路線規(guī)劃的功能，官網(wǎng)也是有 React 代碼示例。但是吧，這個(gè)Demo有問(wèn)題，地圖是能加載成功，但是其他功能再用 map 這個(gè)變量肯定不行，果不其然是null，處理也簡(jiǎn)單，把公共變量都管理起來(lái)就行了。

const [map, setMap] = useState(null);
const [AMap, setAMap] = useState(null);
const [driving, setDriving] = useState(null);
const [mass, setMass] = useState(true);
useEffect(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "「你申請(qǐng)的安全密鑰」",
    };
    AMapLoader.reset();
    AMapLoader.load({
        key: "", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        plugins: ["AMap.Driving"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多個(gè)如：['...','...']
    }).then((_AMap) => {
        const _map = new _AMap.Map("container", {
            resizeEnable: true,
            viewMode: '2D', // 默認(rèn)使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請(qǐng)?jiān)O(shè)置 viewMode: '3D'
            zoom: 11, // 初始化地圖層級(jí)
            center: [116.397428, 39.93000] // 初始化地圖中心點(diǎn)
        });
        _map.on('complete', () => {
            setAMap(_AMap)
        });
        setMap(_map);
        const driving = new _AMap.Driving({
            map: _map
        });
        setDriving(driving);
    }).catch((e) => {
        console.log(e);
    });
    return () => {
        map?.destroy();
    };
}, [])

二、標(biāo)注點(diǎn)問(wèn)題

普通點(diǎn)標(biāo)記多了會(huì)很慢，高德提供了海量點(diǎn)標(biāo)記功能（攝像頭太多了），如果文字都顯示是又慢又亂，所有單獨(dú)綁定單擊事件，并用 Text 文本標(biāo)記。

const camera = []; //你的數(shù)組
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 //該數(shù)據(jù)的取值為樣式數(shù)組對(duì)應(yīng)的對(duì)象索引
    });
}
// 海量標(biāo)記攝像頭
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);

三、效率問(wèn)題

目前規(guī)劃路線的效率有點(diǎn)慢，主要是攝像頭過(guò)多，按步全量循環(huán)算路太耗時(shí)，下一步更新要把所有的攝像頭分區(qū)，按線路走向過(guò)濾算路，理論上能減少一半以上的計(jì)算時(shí)間，期待的搓搓小手。大家感興趣的可以在微信公眾號(hào)體驗(yàn)一下，希望可以幫助到有需要的人。

到此這篇關(guān)于React 高德地圖進(jìn)京證路線規(guī)劃問(wèn)題小記的文章就介紹到這了,更多相關(guān)React 高德地圖進(jìn)京證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: