高德地图JS-API (超简单Get新技能√)

  上几章我们研究了百度地图SDK的用法,虽然不难但是配置起来也是相当的繁琐,现在高德LBS开放平台推出了基于HTML5的地图组件,我们可以通过WebView直接用URL 以GET方式进行请求就可以实现位置标注,路线规划,周边搜索的功能,大大简化了我们的工作量,而且不需要导入任何的文件,下面为大家介绍一下。

第一步:申请Key

同百度地图一样还是需要申请一个Key,但是申请步骤十分简单。

网址: http://lbs.amap.com

1、输入应用名称。

2、选择JavaScript API

3、点击获取Key

第二步: 配置URL

功能1:位置标注

示例说明

http://m.amap.com/navi/?dest=121.442946,37.468676&destName=杰瑞教育&hideRouteIcon=1&key=(您申请的key)

参数说明:

效果图:

功能2:路线规划

示例说明

http://m.amap.com/navi/?start=121.442946,37.468676&dest=121.447967,37.464418&destName=一条驾车路线&key=(您申请的key)

参数说明:

效果图

功能3:周边搜索

示例说明

http://m.amap.com/around/?locations=121.442946,37.468676&keywords=美食,KTV,公交站&defaultIndex=3&defaultView=map&searchRadius=5000&key=(您申请的key)

参数说明:

效果图:

最后因为我们是使用WebView进行加载URL,不要忘了加入访问网络的权限:

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

  到这里就已经全部介绍完了,是不是超级简单呢,因为是用URL进行访问不仅支持Android和IOS 而且在PC上一样可以打开,赶紧试试吧

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

技术咨询:

时间: 2024-08-07 16:47:09

高德地图JS-API (超简单Get新技能√)的相关文章

高德地图 js api 使用

使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js  <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key"></script> 完成以上两步就可以在页面中加载 高德地图了. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charse

高德地图JavaScript API开发研究

原文:高德地图JavaScript API开发研究 高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富.交互性强的地图应用.高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能,并提供了搜索和路线规划等服务. 1.首先 2.然后 3.最后就是看官方文档开发 高德地图API使用介绍:http://lbs.amap.com/api/javascript-api/guide-2/map_

百度地图JS API移动端,phonegap 自定义覆盖物Click事件无法执行 的 bug 解决方法

当你为自定义覆盖物添加了click事件后,你会发现在移动端是无论如何也触发不了的,这算是一个BUG. 最近我在为我的地图APP开发第二版,在为一个覆盖物添加行为事被困扰到了,自定义覆盖物的click事件竟然无法在iPhone端触发,以及百度地图JS API里面的开源库涉及到自定义覆盖物click事件的均无效. 我为这个BUG烦恼了很久,直到今天,在QQ群里网友(在此要先感谢这位网友mooring)告诉了我解决方法:iPhone上的自定义覆盖物事件默认会触发map的click事件,如果map定义了

【原创】web端高德地图javascript API的调用

关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lbs.amap.com/api/javascript-api/summary/ 使用方法 1.注册成为高德地图开发者,创建应用后申请key. 2.引入高德地图API <script type="text/javascript" src="http://webapi.amap.

调用高德地图web api 规划路线

实现地图输出,出发地与目的地路线,效果如下 具体代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-sc

百度地图JS API

1.百度地图api的使用 1)申请百度账号和ak 2)引用百度地图API文件 <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 3)获取当前位置的经纬度 //获取当前位置的经纬度 getCurrentPosition:function(context,params){ //navigator.geolocation部分手机有权限问题 Vue.prototype.$comm

关于百度地图js api的getCurrentPosition定位不准确的解决方法

很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. 1 //创建查询对象 2 var geolocation = new BMap.Geolocation(); 3 4 //调用getCurrentPosition函数 5 geolocation.getCurrentPosition(function (position) { 6 7 //如果查询成功 8 if (this.getStatu() == 'B

今天学了一个简单的新技能Xcode6以后创建工程后没有.pch文件,所以来个技能

1.首先就是创建一个工程 2.可以看到,里面是不包含.pch文件的,这里我们需要施展“手动添加.pch文件”技能 >>command+N出来窗口中选者other 3.other里面找到创建 .pch文件 的图标,创建 4.然后就点进Build Settings,输入prefix Header可以找到 Apple LLVM 6.0 - Language目录下的Prefix Header,施展鼠标双击技能(施展对象Prefix Header右边的空白处,施展不了就再 往右一点),技能释放之后Xco

vue-cli2.X中引入高德地图,将其设为全局对象

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key,传送门:https://lbs.amap.com/api/javascript-api/guide/abc/prepare 接下来在cli项目根目录下的index.html中的<header>标签中用script标签引入 <script type="text/javascript