如何在H5中实现高品位的APP？ （上）

本文将告诉您如何在H5中调用高德地图APP并显示兴趣点. 它适用于展示餐厅，购物中心等网页调用高德地图导航，允许用户选择出行方式.

在一些基于位置共享的应用程序开发中，我们将在地图上标记标记点或使用地图上的poi点. 这时，如果可以在高德地图客户端上显示该位置，则用户可以使用导航或路线规划等功能转到指定位置，并起到引导用户的作用. 因此，JSAPI提供的功能可以调用高道德地图并显示点标记或poi点，以满足此类需求.

我们通常使用Marker点来校准位置，因此JSAPI在Marker类中提供了markOnAMAP方法. 此方法接受JSON对象参数. 参数对象包含两个属性，位置和名称. 高级德语地图客户端或网站标记显示相应的标记点. 然后，根据标记点的显示，用户可以使用搜索网页调用高德地图导航，路线规划和导航功能. 扫描右侧的QR码，然后单击地图上的标记以查看移动终端的效果.

核心代码:

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张阿里云优惠券，并获得至少40％的折扣以购买阿里云产品. 该数量是有限的，仅在发送时可用. 点击查看更多细节: ; tid = 20143

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-206748-1.html