如何实现在H5里调起高德地图APP

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现在H5里调起高德地图APP相关的知识，希望对你有一定的参考价值。

参考技术A 小德建议您点击高德官网首页--开放平台--控制台--工单--创建工单哦。

如何实现在H5里调起高德地图APP？（上）

这一篇文章，将讲述如何在H5里调起高德地图APP，并展示兴趣点。适合于展示某个餐馆，商场等，让用户自行选择前往方式。

场景一、在高德地图上展示Marker点或者POI标记

在一些基于位置分享的应用开发中，我们会在地图上标记marker点或者使用地图上的poi点，这时候如果能在高德地图客户端展示这个位置的话，用户就可以使用导航或者路线规划等功能前往指定地点，起到引导用户前往的作用，因此JSAPI提供的调起高德地图并显示点标记或者poi点的功能，以满足此类需求。

点标记位置展示

通常我们都使用Marker点来进行位置的标定，所以JSAPI在Marker类中提供了markOnAMAP的方法，这个方法接受一个JSON对象参数，参数对象包含position和name两个属性，调起之后将在高德地图客户端或者Web站点标记显示对应的Marker点，基于marker点的展示，用户可以接着使用周边搜索、路线规划和导航等功能。扫描右侧二维码，点击地图中见的marker点查看移动端调起来效果。

 

核心代码：

var marker = new AMap.Marker({
        position:[116.473188,39.993253]
    });

    marker.markOnAMAP({
        position: marker.getPosition(),
        name:\'首开广场\'//name属性在移动端有效
    })

 

全部源代码，可复制后直接使用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <style>
        body,#mapContainer{
            margin:0;
            height:100%;
            width:100%;
            font-size:12px;
        }
    </style>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.ToolBar"></script>
    <script>
        function init() {
            map = new AMap.Map("mapContainer", {
                zoom: 18,
                center:[116.473188,39.993253]
            });
            marker = new AMap.Marker({
                map:map,
                position:[116.473188,39.993253]
            })
            marker.setLabel({
                offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
                content: "点击Marker打开高德地图"
            });
            marker.on(\'click\',function(e){
                marker.markOnAMAP({
                    name:\'首开广场\',
                    position:marker.getPosition()
                })
            })
            map.addControl(new AMap.ToolBar());
            if(AMap.UA.mobile){
                document.getElementById(\'button_group\').style.display=\'none\';
            }
        }
    </script>
</head>
<body onload="init()">
    <div id="mapContainer" ></div>
    <div class="button-group" id=\'button_group\' style=\'top:15px;bottom:inherit\'>
        <img src="http://a.amap.com/lbs/static/img/markonapp.png" style=\'width:120px;height:120px\'>
        <div class=\'button\' style=\'text-align: center\'>手机扫码打开demo</div>
    </div>
</body>
</html>

 

---------------------------------------------------------------------------------------------------------------

即日起至 2016/10/31 止，凡注册成为高德开发者的新用户，即可获赠 1 张阿里云优惠券，可享受最低 6 折购买阿里云产品。数量有限，发完即止。详情点击： http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=20143

 

以上是关于如何实现在H5里调起高德地图APP的主要内容，如果未能解决你的问题，请参考以下文章

如何实现在H5里调起高德地图APP

iOS App内部调起百度地图、高德地图、腾讯地图

如何在H5中调用百度地图APP和高德地图APP

关于App打开高德和百度地图导航的代码

html5中高德腾讯百度 地图api调起手机app

h5使用高德地图手动拖动地图选择位置