這一篇文章，將講述如何在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