zoukankan      html  css  js  c++  java
  • 如何实现在H5里调起高德地图APP

    点标记位置展示

    通常我们都使用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%;
                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='120px;height:120px'>
            <div class='button' style='text-align: center'>手机扫码打开demo</div>
        </div>
    </body>
    </html>

  • 相关阅读:
    【贪心】时空定位I
    【贪心】删数问题
    【贪心】取火柴游戏
    【贪心】均分纸牌
    Fix a Tree
    Vacations
    One Bomb
    Abandoned country
    BZOJ 1006 [HNOI2008]神奇的国度
    BZOJ 2118 墨墨的等式
  • 原文地址:https://www.cnblogs.com/cuijinlong/p/7570244.html
Copyright © 2011-2022 走看看