如何实现在H5里调起高德地图APP
Posted JLCUI
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现在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%;
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>
以上是关于如何实现在H5里调起高德地图APP的主要内容，如果未能解决你的问题，请参考以下文章