react頁面喚起高德地圖app

1、index.html引用高德js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=此處換成你註冊的高德key&plugin=AMap.ToolBar" />
</script>

2、初始化高德地圖事件

componentDidMount() {
    this.openGaode.call(this);
}

3、頁面定義方法

openGaode = () => {
    const AMap = window.AMap;
    var map = new AMap.Map("container");
    AMap.plugin(["AMap.Walking"], function () {
        var drivingOption = {
            map: map
        };
        var walking = new AMap.Walking(drivingOption); //構造駕車導航類
        //根據起終點座標規劃駕車路線
        walking.search([{
            keyword: '首開廣場',
            city: '010'
        }, {
            keyword: '綠地中心',
            city: '010'
        }], function (status, result) {
            button.onclick = function () {
                walking.searchOnAMAP({
                    origin: result.origin,
                    destination: result.destination
                });
            }
        });
    });
    var button = document.getElementById('callApp');
}

4、頁面render

render() {
    return (
        <div style={{ height: window.innerHeight }}>
            <div id="container"></div>
            <button id='callApp'>點選調起高德地圖</button>
        </div>
    );
}

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。