这一篇文章,将讲述如何在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?(上)的更多相关文章

  1. 如何实现在H5里调起高德地图APP?

    http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...

  2. 如何实现在H5里调起高德地图APP?(下)

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  3. 如何实现在H5里调起高德地图APP

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  4. 在H5页面内通过地址调起高德地图实现导航

    项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...

  5. ArchSummit分享 | 高德地图App架构演化与实践

    讲师介绍 郝仁杰,高德地图无线开发专家.在7月13日落幕的2019年ArchSummit峰会上就高德地图近几年的App架构演化和实践进行了分享. 背景概述 高德是国内领先的数字地图内容.导航和位置服务 ...

  6. H5端调起百度地图、腾讯地图app

    来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...

  7. 调用百度、高德地图App,百度地图网页版,App定位

    https://www.jianshu.com/p/296a3995adc2 https://blog.csdn.net/qq_26598821/article/details/51087785 ht ...

  8. vue2使用高德地图vue-amap定位以及AMapUI标注

    前言 最近在vue里使用了高德地图vue-amap以及AMapUI,我在这里就说下如何在vue2里引入vue-amap和AmapUI以及使用定位 (在这里默认你已经安装了vue-cli) 安装 npm ...

  9. 【idea】高德地图可以关爱一下高个汽车

    现状:1.交通事故时不时能看到大卡车,双层巴士在城市里限高区域时的车祸 原因分析:1.司机对路况不熟,驶入新的限高路,造成事故2.司机对车况不熟,临时换的车驾驶,忘记车高的变化3.司机路况车况都熟,道 ...

随机推荐

  1. ab压力测试和CC预防

    这两天从服务器上拉数据时,发现取回的数据不正确,而客户端当初健壮性不强,导致解析的数据为空. 起初以为是服务器维护的问题,可今天服务器登陆上了,发现还是数据不正确,正好昨天数据部的哥们告诉了我一个比较 ...

  2. C# 基本算法

    1.冒泡排序 排序 ,,,,,, }; ; i < ArrayList.Count(); i++) { for (int j = i; j < ArrayList.Count(); j++ ...

  3. Kafka在Centos6.4中的集群搭建

    环境要求:三台装有Centos6.4的虚拟机,需要有java1.7以上的环境,需要ZooKeeper环境. 1)从Kafka官网下载Kafka安装包 下载Kafka 2)解压安装包 tar -xzf ...

  4. ubuntu 14.04加入五笔输入法

    快捷键"ctrl+AIt+T",弹出终端,输入以下指令 //先卸载IBUS输入法 killall ibus-daemon sudo apt- get purge ibus ibus ...

  5. 6.1-6.5关于html

    网页一般是两种元素组合起来的,一种是内联元素, 也就是行内显示,加上width和height没效果.一种是区块元素,可以加上对应的width和height, 通常使用在网页的布局,最常用的就是< ...

  6. gvim 备份文件去除 配置

    默认情况下使用Vim编程,在修改文件后系统会自动生成一个带~的备份文件,看上去又乱又讨人厌. 怎么让Vim不自动生成这些备份文件呢? 1. 找到你的Vim安装目录,如果是在Windows下默认路径安装 ...

  7. Sql语句,先查询再插入一条语句完成。

    if ( (select COUNT(*) from Hr where 考勤号码 = '149' and 日期时间 = '2015/7/3 12:00:26') = 0 )INSERT  INTO [ ...

  8. java的四种引用,强弱软虚

    1.利用软引用和弱引用解决OOM问题:用一个HashMap来保存图片的路径和相应图片对象关联的软引用之间的映射关系,在内存不足时,JVM会自动回收这些缓存图片对象所占用的空间,从而有效地避免了OOM的 ...

  9. MongoDB基本概念

    MongoDB是一种强大灵活可扩展的数据存储方式,它扩展了关系数据库的众多功能.MongoDB的功能非常丰富,但是却非常容易上手和便于使用,今天来了解一下MongoDB的主要概念. 文档 文档是的核心 ...

  10. 微信支付接口 H5

    php微信支付若干问题记录 1.缺少参数$key0$ 此问题的可能性有几种,大致有1.timeStamp这个参数应该是string类型,默认time是int 2.确实是参数缺少  比如:prepay_ ...