回到頂部

react頁面喚起高德地圖app

時間:7個月前   作者:龐順龍   瀏覽:120   [站內原創,轉載請注明出處]

標簽: React  

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人立場,如涉及侵權,請及時告知。

評論努力加載中...
暫無評論
暫無評論

手機掃碼閱讀

熱門相關

加載中...
關于我們   聯系我們   申請友鏈   贊助記錄   站點地圖
? 2014 - 2017 www.1255315.live All Rights Reserved. 京ICP備14042174號-1
本站遵循 CC BY 4.0 協議,轉載請注明出處 。
辽宁十一选五走实图