如何實現在H5裡調起高德地圖APP？（上）

酸奶小妹發表於2016-09-27
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

 

相關文章