http://www.cnblogs.com/milkmap/p/5912350.html
這一篇文章，將講述如何在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>
這一篇文章將告訴您，如果直接打開高德地圖APP，並展示路線規划。適合有定位的移動設備，可以查詢到從“我的位置”到目的地的路徑規划，並直接導航。
場景二、調起高德地圖的路線規划功能
導航是目前JSAPI無法覆蓋到的高德地圖客戶端的重要功能，目前高德地圖提供了駕車、公交、步行三種方式的導航服務，JSAPI在Driving、Transfer、Walking三個路線規划插件類中提供了相關功能調起接口，使用這些接口開發者可以在Web頁面中直接打開客戶端的路線規划結果界面，也可以看到客戶端提供的策略更豐富的路線規划結果，只需要點擊一下便可以開始導航。想要實現這個功能只需要兩步：
加載路線規划插件並創建對象
這里我們以駕車路線規划為例，加載Driving插件，創建Driving對象，同時設置駕車策略為最短時間：
AMap.plugin(["AMap.Driving"], function() {
var drivingOption = {
policy:AMap.DrivingPolicy.LEAST_TIME,
map:map
};
var driving = new AMap.Driving(drivingOption); //構造駕車導航類
});
調用searchOnAMAP方法
Driving對象創建完畢之后，只需要在需要的地方調用searchOnAMAP方法就可以了，下面代碼中是在button的點擊事件中調用的。searchOnAMAP方法接收一個JSON對象參數，對象中需要指定路線規划的起終點坐標，同時也可以設定起終點名稱，示例代碼中我們利用了JSAPI路線規划的結果數據中的起終點坐標。調起高德地圖客戶端之后，只要點擊‘開始導航’就可以使用導航功能了:
//根據起終點坐標規划駕車路線
driving.search(
[{keyword:'北京站'},{keyword:'北京大學'}],
function(status,result){
button.onclick = function(){
driving.searchOnAMAP({
origin:result.origin,
destination:result.destination
});
}
});
查看全部源代碼
<!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%;
text-align: center;
font-size:12px;
}
.panel{
position: absolute;
top:15px;
right: 15px;
}
.qrcodetxt{
background-color: #0D9BF2;
padding: 6px;
color: white;
}
.center{
position: absolute;
width: 100%;
bottom: 24px;
}
.btmtip {
cursor: pointer;
border-radius: 5px;
background-color: #0D9BF2;
padding: 6px;
width: 160px;
color: white;
margin: 0 auto;
}
</style>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&plugin=AMap.ToolBar"></script>
<script>
function init() {
var button = document.getElementById('bt');
map = new AMap.Map("mapContainer");
AMap.plugin(["AMap.Driving"], function() {
var drivingOption = {
policy:AMap.DrivingPolicy.LEAST_TIME,
map:map
};
var driving = new AMap.Driving(drivingOption); //構造駕車導航類
//根據起終點坐標規划駕車路線
driving.search([{keyword:'北京站'},{keyword:'北京大學'}],function(status,result){
button.onclick = function(){
driving.searchOnAMAP({
origin:result.origin,
destination:result.destination
});
}
});
});
map.addControl(new AMap.ToolBar());
if(AMap.UA.mobile){
document.getElementById('bitmap').style.display='none';
bt.style.fontSize = '16px';
}else{
bt.style.marginRight = '10px';
}
}
</script>
</head>
<body onload="init()">
<div id="mapContainer" ></div>
<div class='center'>
<div id='bt' class="btmtip">點擊去高德地圖</div>
</div>
<div class="panel" id='bitmap' style='top:15px'>
<img src="http://a.amap.com/lbs/static/img/drivingonapp.png" style='width:120px;height:120px'>
<div class='qrcodetxt' style='text-align: center'>手機掃碼打開demo</div>
</div>
</body>
</html>