回到顶部

react页面唤起高德地图app

时间:2个月前   作者:请喊我大龙哥   浏览:62   [站内原创,转载请注明出处]

标签: 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.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。