如何实现在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 >
    <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>

时间: 2024-10-24 13:59:06

如何实现在H5里调起高德地图APP的相关文章

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

这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发中,我们会在地图上标记marker点或者使用地图上的poi点,这时候如果能在高德地图客户端展示这个位置的话,用户就可以使用导航或者路线规划等功能前往指定地点,起到引导用户前往的作用,因此JSAPI提供的调起高德地图并显示点标记或者poi点的功能,以满足此类需求. 点标记位置展示 通常我们都使用Mar

Android 高德地图的定位,周边搜索

刚弄完这两个功能,当然是结合官网例子实现的.效果还行,稍作优化便可整合到app使用.在这里做一下总结,及说明下我的思路. 刚开始上手感觉比较乱学起来也比较累,方法,类太多,直接复制各种错,还不知道为什么这么做.现在我们一起交流下实现的思路: 1:定位:这是所有地图功能实现的基础,所以不管要实现诸如周边搜索啊,导航啊什么的都需要基于定位. 如何定位:官网上例子也很详细,主要是实现几个监听,并实现方法: aMap.setLocationSource(this);// 设置定位监听 //绑定监听 ma

高德地图百度地图导航坐标转换

项目中的定位商家服务搜索用的是高德地图,毕竟高德在地图这块做的比百度好(个人认为).这里吐槽下百度的开发平台,上面开发文档及案例写的真不好,想找某个问题点很难找到和定位,希望百度改善下. 高德转百度(火星坐标gcj02ll–>百度坐标bd09ll) private double[] gaoDeToBaidu(double gd_lon, double gd_lat) { double[] bd_lat_lon = new double[2]; double PI = 3.141592653589

如何把高德地图搜索商家电话资料导出成excel里?

有很多人问我,怎么样能够快速的把高德地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 如何快速地将高德地图里的商家电话资料导出EXCEL? 操作步骤: 1. 选择你要采集的省份, 城市列表里就会有相应的省份的城市列表. 2. 选择要采集的城市,比如: 济南 3. "同时保存为Excel"  选项, 采集完毕后,程序首先会保存一份access数据库文件, 如果这里的对勾打上,则会在相应的文件夹下再产生一个EXCEL文件. 4. "打开文件位置", 采集完毕后

如何把高德地图搜索结果导出成excel里?

前段时间,根据朋友的要求,开发了百度地图里的商家采集工具(博客地址:http://www.cnblogs.com/mymapw/p/5596122.html),又开发了腾讯地图里的商家采集工具(博客地址:http://www.cnblogs.com/mymapw/p/5622077.html),来了兴致,干脆把高德地图的采集工具也一并搞定!:) 原理应该差不多,我就查阅了下高德地图的采集规则,编写了专门针对高德地图的采集软件. 不过界面上和百度地图.腾讯地图的采集软件有了一些不同 粗略采集了下,

打造H5里的“3D全景漫游”秘籍

近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连接QQ物联摄像头为用户提供2016年天体大事件的直播,大家可以通过手Q实时观看到世界各地最佳观测点的日食,流星等天体现象.承载整个“星球计划”活动的运营页面,经多方讨论,我们决定尝试3D全景漫游模式的H5运营页进行推广,今天就不详述活动的具体内容,先和大家聊一聊这H5里“3D全景漫游”的制作方法.

H5高德地图获取当前位置

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, wi

vue里使用高德地图

一.发现vue-amap 发现vue-amap插件,优点是文档详细,易于上手 二.使用vue-amap 1 准备  在使用这个插件之前,首先需要申请高德地图的key.这个到官网就可以申请.申请过程就不叙述了. 2 安装vue-amap npm包安装:npm install -s vue-amap CDN安装:引入组件 3 引入vue-amap(这里以npm安装方式为例) 4 使用vue-amap 使用高德地图api,根据上面的demo使用 原文地址:https://www.cnblogs.com

百度地图、高德地图的数据从哪里得到的?[声明我只是此文章的搬运工,从百度知道复制来的]

要说数据来源,首先得对地图数据做一个分类,因为不同分类的数据,其来源,采集方法都是有大不同的. 要明白地图的数据分类,必须先理解一个概念,就是地图图层的概念: 如上图,电子地图对我们实际空间的表达,事实上是通过不同的图层去描述,然后通过图层叠加显示来进行表达的过程. 对于我们地图应用目标的不同,叠加的图层也是不同的,用以展示我们针对目标所需要信息内容. 其次呢,我引入一下矢量模型和栅格模型的概念,GIS(电子地图)采用两种不同的数学模型来对现实世界进行模拟: 矢量模型:同多X,Y(或者X,Y,Z