首页 > 代码库 > 如何实现在H5里调起高德地图APP？（上）
如何实现在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
如何实现在H5里调起高德地图APP？（上）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。