高德开放平台

高德开放平台 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

高德开放平台 发布了文章 · 2014-09-12

【视频】高德开发者公开课—如何使用AndroidSDK进行开发

赞 0 收藏 1 评论 0

高德开放平台 发布了文章 · 2014-08-12

一句话搞定webmap(一)——轻地图组件

摘要:

遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript……

而如今,要制作一张地图真是越来越容易了!竟然只需要一句话,就可以打点,导航,定位,显示交通流量等。

让我们一起来轻松一下吧~

------------------------------------华丽分割线-----------------------------------------

一、标注
一句话代码:

http://mo.amap.com/navi?dest=parameter1&destName=parameter2&hideRouteIcon=1&key=parameter3

参数说明:

parameter1为兴趣点(如饭店)的经纬度,必填。

parameter2为兴趣点(如饭店)的名字,选填。

parameter3为开发者申请的开发KEY。

其他说明:

右上角自带交通流量按钮;

左下角自带浏览器定位按钮。

使用场景:

某艺术公司的经理名片上,有一个位置二维码。扫描该二维码,可以出现一张地图。

大家可以扫一扫下面的二维码喔。

制作方法:

1、打开坐标拾取器,取到经纬度:http://api.amap.com/LngLatPicker

    比如地址是“北京市朝阳区静安里26号”,得到的经纬度是“116.448477,39.959335”。这是GCJ-02的经纬度,也是火星坐标,国内标准坐标喔。

2、为地点起个名字,比如“真善美艺术公司”。

3、获得一个key:http://api.amap.com/key/

4、将以上三个参数,填入一句话代码中即可。

    比如,用短地址生成器,生成短地址:http://t.cn/RPOUC3Q

    再用二维码生成器http://www.liantu.com/,生成二维码。

二、导航
一句话代码:

http://mo.amap.com/navi?start=&dest=parameter1&destName=parameter2&key=parameter3

参数说明:完全同上。

其他说明:

1、起点会自动定位到您当前的位置,NB吧!其实是默认浏览器定位了,欧耶。

2、如果要指定起点,就在“start=”这里加上经纬度就行。

使用场景:

最典型的例子,就是大众点评一类的APP。

只需点击餐馆地址,无需安装任何地图应用,即可得到一个带定位、带导航的轻地图。

制作方法:

就是标注的一句话代码增加一个参数“start=”,再去掉一个参数“hideRouteIcon=1”。

------------------------------------华丽分割线-----------------------------------------

《一句话搞定webmap之轻地图组件》

是不是特别简单?

特点:轻便 快捷 易用

快点用起来 http://lbs.amap.com/api/lightmap/summary/

查看原文

赞 0 收藏 2 评论 1

高德开放平台 发布了文章 · 2014-07-10

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种。GPS定位,精度较高,可达到10米,但室内不可用,且超级费电。网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点。定位数据库可以不断完善不断补充,所以,越定位越准确。本文详细描述了,如果使用高德JS API来实现位置定位、城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法。当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使得定位更加准确。


一、浏览器定位

浏览器定位插件,封装了标准HTML5定位,并且包含纠偏模块。

由于核心是HTML5定位,所以浏览器定位插件仅适用于支持HTML5的浏览器上,比如,Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等。同时,需要浏览器允许该服务进行定位。如下图:

另外,浏览器定位插件也是混合定位,获取了wifi、基站信息用以定位,对于拥有 GPS 的设备,比如 iPhone,由于获得GPS信息,使得地理定位更加精确。

浏览器定位,最好使用在手机浏览器上,会更加准确,也更加符合使用场景。PC浏览器上,建议使用IP定位。

定位代码:

复制代码
var geolocation;
mapObj.plugin(["AMap.Geolocation"],function(){ //添加浏览器定位服务插件
  var geoOptions={
  enableHighAccuracy:true, //是否使用高精度
  timeout:3000, //若在指定时间内未定位成功,返回超时错误信息。默认无穷大。
  maximumAge:1000 //缓存毫秒数。定位成功后,定位结果的保留时间。默认0。
  };
  geolocation=new AMap.Geolocation(geoOptions);
    AMap.event.addListener(geolocation , ‘complete’,geolocationResult); //定位成功后的回调函数
});
复制代码

效果图:

二、IP定位

通过网络获取IP信息,然后查询IP数据库,获取相应的地址信息。非常适用于城市切换的场景,比如团购、酒店、天气等。

IP数据库也是可以完善补充,越来越丰富的,所以也是越使用越准确的。

但如果IP有跳转,有篡改等,那么IP定位就会不准确了。

复制代码
//加载IP定位插件
mapObj.plugin(["AMap.CitySearch"], function() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP,返回当前城市
citysearch.getLocalCity();
AMap.event.addListener(citysearch, "complete", function(result){
if(result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById('result').innerHTML = "您当前所在城市:"+cityinfo+"";
//地图显示当前城市
mapObj.setBounds(citybounds);
}
else {
document.getElementById('result').innerHTML = "您当前所在城市:"+result.info+"";
}
});
AMap.event.addListener(citysearch, "error", function(result){alert(result.info);});
});
复制代码

效果图:

还有一种“偷懒儿”的方法,是高德浏览器定位的后门,就是使用默认定位。即,在地图初始化时,不填入中心点center和地图级别level,那么高德会自动帮你定位。

但是这也有危险,就是如果定位失败了,也没啥提示。

自动定位代码:

function mapInit () {
mapObj = new AMap.Map('iCenter'); //默认定位:初始化加载地图时,center及level属性缺省,地图默认显示用户所在城市范围
};

三、检索定位

当浏览器定位和IP定位都失败时,可以通过关键字查询,来定位城市甚至街道。

1、POI检索,关键词检索

通过一些简短的关键词,检索一个地点,使用AMap.PlaceSearch地点搜索服务插件。检索到地点后,默认显示第一个点的位置即可。

参数对象PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。

代码:

复制代码
var MSearch;
var key_1;
function placeSearch() { //POI搜索,关键字查询
key_1 = document.getElementById("key_1").value;
document.getElementById('result').innerHTML = "您输入的是:" + key_1;
mapObj.plugin(["AMap.PlaceSearch"], function() { //构造地点查询类
MSearch = new AMap.PlaceSearch({
pageSize:10,
pageIndex:1,
city:"021" //城市
});
AMap.event.addListener(MSearch, "complete", function(data){
var poiArr = data.poiList.pois;
var lngX = poiArr[0].location.getLng();
var latY = poiArr[0].location.getLat();
mapObj.setCenter(new AMap.LngLat(lngX, latY));
});//返回地点查询结果
MSearch.search(key_1); //关键字查询
});
}
复制代码

2、地址解析

AMap.Geocoder地理编码服务插件,是指将地址信息和地理坐标点信息进行相互转化,包括将地址信息转换为地理坐标点的编码,将地理坐标点转换为地址信息的逆地理编码。

我们使用地址解析。地址解析,是通过将结构化地址信息,解析成经纬度,然后设置地图中心点。

代码:

复制代码
var MGeocoder;
var key_2;
function geocoder() { //地理编码返回结果展示
key_2 = document.getElementById("key_2").value;
document.getElementById('result').innerHTML = "您输入的是:" + key_2;
mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
MGeocoder = new AMap.Geocoder({
city:"010", //城市,默认:“全国”
radius:1000 //范围,默认:500
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", function(data){
var geocode = data.geocodes;
var lngX = geocode[0].location.getLng();
var latY = geocode[0].location.getLat();
mapObj.setCenter(new AMap.LngLat(lngX, latY));
});
MGeocoder.getLocation(key_2); //地理编码
});
}
复制代码

四、源代码与示例

全部源代码:

复制代码
<!DOCTYPE HTML>
<html>
<head>

<title>定位</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" data-original="http://webapi.amap.com/maps?v=1.3&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">





  • <button onclick="javascript:getCurrentPosition();">浏览器定位</button>


  • <button onclick="javascript:showCityInfo();">IP定位</button>


  • <input type="text" id="key_1" value="上海市" />
    <button onclick="javascript:placeSearch();">关键字定位</button>


  • <input type="text" id="key_2" value="北京市朝阳区大屯路" />
    <button onclick="javascript:geocoder();">地址定位</button>




</body> <script language="javascript"> var mapObj, geolocation; var result; function mapInit () { mapObj = new AMap.Map('iCenter'); //默认定位:初始化加载地图时,center及level属性缺省,地图默认显示用户所在城市范围 }; function getCurrentPosition () { //调用浏览器定位服务 mapObj.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 maximumAge: 0, //定位结果缓存0毫秒,默认:0 convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true showButton: true, //显示定位按钮,默认:true buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false }); mapObj.addControl(geolocation); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); }; function onComplete (data) { //解析定位结果 var str = '

定位成功

'; str += '

经度:' + data.position.getLng() + '

'; str += '

纬度:' + data.position.getLat() + '

'; str += '

精度:' + data.accuracy + ' 米

'; str += '

是否经过偏移:' + (data.isConverted ? '是' : '否') + '

'; result.innerHTML = str; }; function onError (data) { //解析定位错误信息 var str = '

定位失败

'; str += '

错误信息:' switch(data.info) { case 'PERMISSION_DENIED': str += '浏览器阻止了定位操作'; break; case 'POSITION_UNAVAILBLE': str += '无法获得当前位置'; break; case 'TIMEOUT': str += '定位超时'; break; default: str += '未知错误'; break; } str += '

'; result.innerHTML = str; }; function showCityInfo() { //IP定位 //加载IP定位插件 mapObj.plugin(["AMap.CitySearch"], function() { //实例化城市查询类 var citysearch = new AMap.CitySearch(); //自动获取用户IP,返回当前城市 citysearch.getLocalCity(); AMap.event.addListener(citysearch, "complete", function(result){ if(result && result.city && result.bounds) { var cityinfo = result.city; var citybounds = result.bounds; document.getElementById('result').innerHTML = "您当前所在城市:"+cityinfo+""; //地图显示当前城市 mapObj.setBounds(citybounds); } else { document.getElementById('result').innerHTML = "您当前所在城市:"+result.info+""; } }); AMap.event.addListener(citysearch, "error", function(result){alert(result.info);}); }); } var MSearch; var key_1; function placeSearch() { //POI搜索,关键字查询 key_1 = document.getElementById("key_1").value; document.getElementById('result').innerHTML = "您输入的是:" + key_1; mapObj.plugin(["AMap.PlaceSearch"], function() { //构造地点查询类 MSearch = new AMap.PlaceSearch({ pageSize:10, pageIndex:1, city:"021" //城市 }); AMap.event.addListener(MSearch, "complete", function(data){ var poiArr = data.poiList.pois; var lngX = poiArr[0].location.getLng(); var latY = poiArr[0].location.getLat(); mapObj.setCenter(new AMap.LngLat(lngX, latY)); });//返回地点查询结果 MSearch.search(key_1); //关键字查询 }); } var MGeocoder; var key_2; function geocoder() { //地理编码返回结果展示 key_2 = document.getElementById("key_2").value; document.getElementById('result').innerHTML = "您输入的是:" + key_2; mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件 MGeocoder = new AMap.Geocoder({ city:"010", //城市,默认:“全国” radius:1000 //范围,默认:500 }); //返回地理编码结果 AMap.event.addListener(MGeocoder, "complete", function(data){ var geocode = data.geocodes; var lngX = geocode[0].location.getLng(); var latY = geocode[0].location.getLat(); mapObj.setCenter(new AMap.LngLat(lngX, latY)); }); MGeocoder.getLocation(key_2); //地理编码 }); } </script>

</html>
复制代码

效果图:

demo地址:http://zhaoziang.com/amap/zero_7_1.html

查看原文

赞 0 收藏 7 评论 1

高德开放平台 发布了文章 · 2014-06-28

高德开发者四重大礼 奖金+礼品 根本停不下来!

亲爱的开发者们:
看到活动标题,高小爱都被自己感动了!
高小爱不但为大家提供着业内最最最专业的地图产品,更是时时刻刻想着为辛苦的开发者们送点福利。不能错过的不光是助你一臂之力的地图产品,还有高小爱满满的关怀和真枪实弹的奖励!!!

第一礼: 成为高德开发者 每天都送礼!

  从今天开始我们每天都会从注册并完善开发者信息的同学中随机抽取一位幸运的小伙伴送出奖品,动动鼠标,马上行动!

第二礼:使用Android导航SDK 千元现金大奖等你来拿

   高德开放平台Android导航SDK V1.0.0正式上线啦!!!它兼容了车载与步行两种导航方式,在兼顾功能的前提下大幅降低了您的开发成本。
   还在等什么,现在马上试用,就有机会获得千元现金大奖,5个千元名额等着你……

第三礼:私人定制专属云图赢大奖

   使用云图数据管理台, 数据瞬间导进来, 地图立马有!
   一键分享微博、QQ空间、人人网  so  easy!   
   复制链接,分享哪里,由你做主!
   每周抽取10名幸运儿,随机赠送手机壳、杯盖、U型枕、小音箱、U盘、360随身wifi等精美好礼。

第四礼:参加2014高德LBS应用大赛 千万创投资金等你拿!

   2014高德LBS应用大赛是面向广大IT从业者及开发爱好者而举办的LBS产品开发大赛,由高德LBS开放平台举办,致力于推动中国互联网及移动互联网生态系统的成长。参赛选手不限年龄,不限职业,所有有创新、有想法的移动互联网公司、团队、工作室或个人,只要你敢来,就有机会获得高德提供的28万+300万的创业基金。

想了解更多咨询,欢迎来到本周在北京举行的SegmentFault黑客马拉松,与高德地图进行面对面的交流!

查看原文

赞 0 收藏 0 评论 0

高德开放平台 发布了文章 · 2014-06-18

【云图】如何制作附近实体店的地图?

摘要:适用于【支付宝微信微博】。

附近连锁店地图与全国连锁店地图,最大的区别就是:

1、附近连锁店地图需要先定位,然后搜索附近的店铺。

2、全国连锁店地图,是先选择城市,然后检索某城市内的全部门店信息。

本文就详细讲解了如何制作附近实体店的地图,并调起高德地图进行导航,调起打电话功能。

本文还详细讲解了如何设置支付宝服务、微信公众号、微博官方账号的地图功能。


一、支付宝设置

登录支付宝服务窗:https://fuwu.alipay.com/platform/queryMenu.htm

自定义菜单 -> 主菜单 -> 有子级菜单

填写子菜单名称,设置为跳转网页,并且放入网址。比如菜鸟物流:http://zhaoziang.com/amap/cainiao.html

最后点击发布。

请输入图片描述

二、微信设置

登录微信公众平台:https://mp.weixin.qq.com

功能->高级功能->编辑模式->自定义菜单-> 菜单管理->添加->设置动作

设置为跳转网页,并且放入网址。比如菜鸟物流:http://zhaoziang.com/amap/cainiao.html

最后点保存。
请输入图片描述

三、微博设置

登录微博:http://weibo.com/

管理中心->粉丝服务->高级功能->编辑模式->自定义菜单-> 菜单管理->添加->设置动作

设置为跳转网页,并且放入网址。比如菜鸟物流:http://zhaoziang.com/amap/cainiao.html

最后点保存。
请输入图片描述

四、云图设置

登录云图管理台:http://yuntu.amap.com/datamanager/index.html

新建地图
请输入图片描述

导入CSV数据。(支持UTF8和GBK 编码,数据不超过10,000 条)

点击预览,即可看到自己的云图。
请输入图片描述

五、代码与获取网址

将以下代码复制下来,替换key、tableID、图标,然后生成自己的网址。

获取key的地址:http://api.amap.com/key

获取tableID的地址:

进入你的云图->获取tableID
请输入图片描述

全部源代码请在demo中获取。
demo网址(请用手机浏览器查看):http://zhaoziang.com/amap/cainiao.html

效果图:
请输入图片描述

六、其他云图教程

【支付宝中的全国家乐福地图】http://www.cnblogs.com/milkmap/p/3786144.html

【微信中的全国AMF海水农场地图】http://www.cnblogs.com/milkmap/p/3780417.html

【官网中的全国AMF海水农场地图】http://www.cnblogs.com/milkmap/p/3778398.html

【应用中webview形式的全国KTV地图】http://www.cnblogs.com/milkmap/p/3765925.html

【三甲医院】http://www.cnblogs.com/milkmap/p/3637899.html

【东莞地图】http://www.cnblogs.com/milkmap/p/3657829.html

【贪官落马图】http://www.cnblogs.com/milkmap/p/3678377.html

七、从零开始学高德JS API系列教程

【地图展现】http://www.cnblogs.com/milkmap/p/3687855.html

【控件】http://www.cnblogs.com/milkmap/p/3707711.html

【覆盖物】http://www.cnblogs.com/milkmap/p/3727842.html

【搜索服务】http://www.cnblogs.com/milkmap/p/3745701.html

【路线规划】http://www.cnblogs.com/milkmap/p/3755257.html

【坐标转换】http://www.cnblogs.com/milkmap/p/3768379.html

查看原文

赞 0 收藏 2 评论 0

高德开放平台 发布了文章 · 2014-06-16

【云图】如何制作全国连锁店分布地图?

摘要:本文详细讲解了,如何设置支付宝服务窗。商家如何将自己的全国连锁店放置到云图上,并且在支付宝服务窗中提供地图查询功能。本文所包含的地图服务为:

1、按城市查询门店地址;

2、列表模式和地图模式的方便切换;

3、调起打电话服务,更快与客户直接接触;

4、地图定位,导航,查周边。


一、支付宝

1、服务窗设置

登录支付宝服务窗:https://fuwu.alipay.com/platform/queryMenu.htm

自定义菜单 -> 主菜单 -> 有子级菜单

填写子菜单名称,设置为跳转网页,并且放入网址。比如家乐福门店的网址:http://zhaoziang.com/amap/carrefour.html

(家乐福门店地图的制作在第三部分 云图)

最后点击发布。

2、生成二维码

在服务未审核通过之前,只能通过二维码进行关注。

账户设置 -> 基本信息

将您的二维码分享到微博,让更多的人知道你提供支付宝服务。

3、查看效果

打开支付宝客户端,扫描二维码。

立刻添加 -> 立刻查看 -> 成功案例 -> 家乐福

二、数据准备

1、门店数据

从家乐福官网上获取门店数据:http://www.carrefour.com.cn/Store/Store.aspx

存入excel中,并保存为CSV格式,uft-8编码。(小于10000条数据)

该教程为示例,所以只提供了北京和广州2个城市的门店数据。其中,广州数据为:

复制代码
name,address,tel,pic
金沙店,广州市海珠区工业大道北76-80号家信商业中心,(020) 8961 1230,http://imgs.carrefour.com.cn/Store/678_282_D34209E77BF840058C2B6F5CBAE27610.jpg
康王店,广州市荔湾区康王中路656号新光城市广场地下一、二层,(020) 8133 7619,http://imgs.carrefour.com.cn/Store/678_282_974C095FE09144C6B22C35CD95A8673D.jpg
万国店,广州海珠区前进路40号万国广场2-3楼,(020) 8426 2633,http://imgs.carrefour.com.cn/Store/678_282_A6F46DFAA74E488AB0F69413F4CE411A.jpg
新市店,广州市白云区机场路1339号百信广场家乐福,(020) 3663 5319,http://imgs.carrefour.com.cn/Store/678_282_594A48A43B994586955F7CFB4C340BA9.jpg
员村店,广州市天河区员村恒隆街3号,(020) 8564,http://imgs.carrefour.com.cn/Store/678_282_ED02FD7F9D1D4901A17144A9B3CC98D6.jpg
复制代码

2、登录云图,导入数据。

登录云图:http://yuntu.amap.com/datamanager/index.html

点击新建地图

导入CSV表格数据,然后预览。

就能看到全国门店分布图了

三、云图的网页制作

为了让地图可以进行分城市查询,列表模式展示,调起打电话功能,调起地图导航、地图定位、搜索周边等功能,需要一段网站代码。

代码已经写好了,只需要你加入key和tableID即可。

1、获取key的位置:http://api.amap.com/key

2、获取云图tableID:进入你的云图->获取tableID

3、代码

复制代码
<!DOCTYPE HTML>
<html>
<head>


<title>家乐福全国门店</title>
<style>
/** reset /
body,html,div,p,li,ul,ol,p,select,h3{padding:0;margin:0;}
body,html{width:100%;height:100%;}
img{border:none;}
a{text-decoration:none;}
a:hover{color:#FF7F27;}
body{color:#333;font-family:"Microsoft YaHei";text-align:center;font-size:14px;}
img:hover{filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}
ul,li{list-style:none;}
/
clearfix /
.clearfix{display:block;zoom:1;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/
zhifubao **/
.header{width:100%;height:10%;float:left;background:#b3ffd7;}
.header select{width:60%;height:100%;float:left;padding:1px;font-size:16px;}
.btnChange{width:39%;height:100%;float:left;overflow:hidden;font-size:16px;line-height:3.5em;}

map,#list{height:90%;width:100%;}

list{text-align:left;}

.item{border-bottom:1px dashed #ccc;padding:10px;}
</style>
<script language="javascript" data-original="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">


<select onchange="getType(this.options[this.selectedIndex].text)" >



</select>



正在读取数据……

</body> <script language="javascript"> function display(id1,id2){ document.getElementById('map').style.display = 'none'; document.getElementById('list').style.display = 'none'; document.getElementById('iListBtn').style.display = 'none'; document.getElementById('iMapBtn').style.display = 'none'; document.getElementById(id1).style.display = 'block'; document.getElementById(id2).style.display = 'block'; if (id1 === 'map' && mapObj) { mapObj.setFitView(); } } var mapObj; var cloudDataLayer; var cloudSearch; var pBeijing = new AMap.LngLat(116.38298,39.955543); //初始化地图对象,加载地图 function mapInit(){ mapObj = new AMap.Map("map",{ resizeEnable: true, center: pBeijing, //地图中心点 level:12 //地图显示的比例尺级别 }); myCloudList("北京"); } //云图加载列表 function myCloudList(id){ //列表 mapObj.plugin(["AMap.CloudDataSearch"], function() { //绘制多边形 var arr = new Array(); arr.push(new AMap.LngLat(75.585938,52.696361)); arr.push(new AMap.LngLat(134.472656,53.956086)); arr.push(new AMap.LngLat(129.726563,16.467695)); arr.push(new AMap.LngLat(81.914063,20.13847)); arr.push(new AMap.LngLat(75.585938,52.696361)); var searchOptions = { keywords: id, pageSize:100 }; cloudSearch = new AMap.CloudDataSearch('【您的tableID】', searchOptions); //构造云数据检索类 AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数 AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数 cloudSearch.searchInPolygon(arr); //多边形检索 }); } var markers = new Array(); var windowsArr = new Array(); //添加marker和infowindow function addmarker(i, d){ var lngX = d._location.getLng(); var latY = d._location.getLat(); var IconOptions = { image : "carrefour.png", //您的个性化图标 size : new AMap.Size(33,22), imageSize : new AMap.Size(33,22), imageOffset : new AMap.Pixel(-16,0) }; var myIcon = new AMap.Icon(IconOptions); var markerOption = { map:mapObj, icon: myIcon, offset: new AMap.Pixel(-15,-30), position:new AMap.LngLat(lngX, latY) }; var mar = new AMap.Marker(markerOption); markers.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({ content: "

" + d._name + "

" + "

地址:" + d._address + "

" + "

电话:" + d.tel + "

到这儿去

", size:new AMap.Size(280, 0), autoMove:true, offset:new AMap.Pixel(0,-30), closeWhenClickMap: true }); windowsArr.push(infoWindow); var aa = function(){infoWindow.open(mapObj, mar.getPosition());}; AMap.event.addListener(mar, "click", aa); } //回调函数-成功 function cloudSearch_CallBack(data) { clearMap(); var resultStr=""; var resultArr = data.datas; var resultNum = resultArr.length; for (var i = 0; i "; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址:" + resultArr[i]._address + "

"; resultStr += "

电话:" + resultArr[i].tel + "

"; resultStr += "

地图:到这里去

"; resultStr += ""; addmarker(i, resultArr[i]); //添加大标注 } if (document.getElementById('map').style.display !== 'none') { mapObj.setFitView(); } document.getElementById("list").innerHTML = resultStr; } //回调函数-失败 function errorInfo(data) { resultStr = data.info; document.getElementById("list").innerHTML = resultStr; } //清空地图 function clearMap(){ mapObj.clearMap(); document.getElementById("list").innerHTML = '正在读取数据……'; } //索引云图 function getType(iPrivance){ if(iPrivance=="全国"){ if (document.getElementById('map').style.display !== 'none') { mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208)); } myCloudList(''); var op={ query:{keywords:""} }; cloudDataLayer.setOptions(op); }else{ myCloudList(iPrivance); var op={ query:{keywords:iPrivance} }; cloudDataLayer.setOptions(op); placeSearch(iPrivance); } } //城市查询 function placeSearch(id) { var MSearch; mapObj.plugin(["AMap.PlaceSearch"], function() { MSearch = new AMap.PlaceSearch({ //构造地点查询类 pageSize:1, pageIndex:1, city:"" //城市 }); AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果 MSearch.search(id); //关键字查询 }); } //城市查询后定位 function keywordSearch_CallBack(data) { var iPoint = data.poiList.pois[0].location; mapObj.setZoomAndCenter(10,iPoint); } </script>

</html>
复制代码

4、将以上代码生成网址,填写到支付宝服务窗里。完成!

demo链接:http://zhaoziang.com/amap/carrefour.html

查看原文

赞 0 收藏 2 评论 0

高德开放平台 发布了文章 · 2014-06-10

【云图】如何制作全国KTV查询系统?

摘要:本文以【唱吧】531麦霸音乐节为案例,详细解读了如何导入自有数据到高德云图,并进行检索和展示。最后,调起高德mobile地图来进行路线规划和周边查询。

本案例可以应用在微信开发平台,支付宝公众服务上,适合餐饮商家,汽车4S店,银行,停车场等业务。

由于使用高德云图+URI API的方式实现,开发者无需进行繁琐的数据库操作,即可实现自有数据的存储与检索。


一、数据准备

从唱吧531麦霸节官网获得数据:http://changba.com/yunying/ktvStaticList.php

拷贝到excel,另存为CSV格式,并改成UTF-8或者GBK编码。

二、导入数据

登录云图:http://yuntu.amap.com/datamanager/index.html

点击新建地图:

导入刚才的数据:

点击预览:

出现全国KTV分布图:

三、UE设计图

1、对于KTV的展示,有列表模式和地图模式2种。

2、按照城市检索并展示KTV数据。

3、点击某个KTV,跳转到高德mobile地图,进行路线规划。

四、云图展示全国KTV

采用云图层的方法,将麻点图展示出来。

复制代码
//地图-云图层
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: ''},
clickable:true
};
cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
});
复制代码

示例图:

五、列表展示北京市KTV

用云检索,检索出北京市的KTV。

复制代码
//列表
mapObj.plugin(["AMap.CloudDataSearch"], function() { var searchOptions = {
keywords:'',
orderBy:'_id:ASC'
};
cloudSearch = new AMap.CloudDataSearch('538d71fee4b04192f1f4de77', searchOptions); //构造云数据检索类
AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数
AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数
cloudSearch.searchNearBy(iPoint, 30000); //周边检索
});
复制代码

示例图:

六、采用URI API链接到高德mobile地图

在点击列表,和点击麻点图的时候,采取URI API的方式调取地图。

这样我们只需要知道一个经纬度,就可以调取地图。

示例:

http://mo.amap.com/?q=31.234527,121.287689&name=名字

列表调取mo的代码:

复制代码
//回调函数-成功
function cloudSearch_CallBack(data) {
var resultStr="";
var resultArr = data.datas;
var resultNum = resultArr.length;
for (var i = 0; i < resultNum; i++) {
resultStr += "

"; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址:" + resultArr[i]._address + "

"; resultStr += "

电话:" + resultArr[i].tel + "

"; resultStr += "

";
}
document.getElementById("list").innerHTML = resultStr;
}
复制代码

点击麻点图,出现信息窗口,调取高德mo:

复制代码
AMap.event.addListener(cloudDataLayer, 'click', function (result) {
var clouddata = result.data;
//云图麻点
var infoWindow = new AMap.InfoWindow({
content: "

" + clouddata._name + "

" + "

地址:" + clouddata._address + "

" + "

电话:" + clouddata.tel + "

",
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-5)
});
infoWindow.open(mapObj, clouddata._location);
});
复制代码

高德mo示意图:

七、城市切换

城市切换的时候,云图层展示,和云检索list要分开写。

复制代码
//索引云图
function getType(iPrivance){
if(iPrivance=="全国"){
mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
myCloudList('');
var op={
query:{keywords:""}
};
cloudDataLayer.setOptions(op);
}else{
myCloudList(iPrivance);
var op={
query:{keywords:iPrivance}
};
cloudDataLayer.setOptions(op);
placeSearch(iPrivance);
}
}
复制代码

地图展示完毕之后,需要重新设置中心点。

复制代码
//城市查询
function placeSearch(id) {
var MSearch;
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize:1,
pageIndex:1,
city:"" //城市
});
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
MSearch.search(id); //关键字查询
});
}
//城市查询后定位
function keywordSearch_CallBack(data) {
var iPoint = data.poiList.pois[0].location;
mapObj.setZoomAndCenter(10,iPoint);
}
复制代码

八、全部源代码

复制代码
<!DOCTYPE HTML>
<html>
<head>

<title>云图+mo</title>
<link rel="stylesheet" type="text/css" href="yuntumo.css" />
<script language="javascript" data-original="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">

 


<select onchange="getType(this.options[this.selectedIndex].text)" >























</select>



正在读取数据……

<script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript data-original='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E")); </script>


</body>

<script language="javascript"> function display(id){ document.getElementById('map').style.display = 'none'; document.getElementById('list').style.display = 'none'; document.getElementById(id).style.display = 'block'; } var mapObj; var cloudDataLayer; var cloudSearch; var pBeijing = new AMap.LngLat(116.388474,39.934486); //初始化地图对象,加载地图 function mapInit(){ mapObj = new AMap.Map("map",{ center: pBeijing, //地图中心点 level:11 //地图显示的比例尺级别 }); myCloudMap(); myCloudList("北京"); AMap.event.addListener(mapObj,'click',getLnglat); //点击事件 } //云图加载地图 function myCloudMap(){ //地图-云图层 mapObj.plugin('AMap.CloudDataLayer', function () { var layerOptions = { query:{keywords: '北京'}, clickable:true }; cloudDataLayer = new AMap.CloudDataLayer('538d71fee4b04192f1f4de77', layerOptions); //实例化云图层类 cloudDataLayer.setMap(mapObj); //叠加云图层到地图 AMap.event.addListener(cloudDataLayer, 'click', function (result) { var clouddata = result.data; //云图麻点 var infoWindow = new AMap.InfoWindow({ content: "

" + clouddata._name + "

" + "

地址:" + clouddata._address + "

" + "

电话:" + clouddata.tel + "

", size:new AMap.Size(300, 0), autoMove:true, offset:new AMap.Pixel(0,-5) }); infoWindow.open(mapObj, clouddata._location); }); }); } //云图加载列表 function myCloudList(id){ //列表 mapObj.plugin(["AMap.CloudDataSearch"], function() { //绘制多边形 var arr = new Array(); arr.push(new AMap.LngLat(75.585938,52.696361)); arr.push(new AMap.LngLat(134.472656,53.956086)); arr.push(new AMap.LngLat(129.726563,16.467695)); arr.push(new AMap.LngLat(81.914063,20.13847)); arr.push(new AMap.LngLat(75.585938,52.696361)); var searchOptions = { keywords: id, pageSize:100 }; cloudSearch = new AMap.CloudDataSearch('538d71fee4b04192f1f4de77', searchOptions); //构造云数据检索类 AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数 AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数 cloudSearch.searchInPolygon(arr); //多边形检索 }); } //回调函数-成功 function cloudSearch_CallBack(data) { var resultStr=""; var resultArr = data.datas; var resultNum = resultArr.length; for (var i = 0; i "; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址:" + resultArr[i]._address + "

"; resultStr += "

电话:" + resultArr[i].tel + "

"; resultStr += ""; } document.getElementById("list").innerHTML = resultStr; } //回调函数-失败 function errorInfo(data) { resultStr = data.info; document.getElementById("list").innerHTML = resultStr; } //鼠标点击,获取经纬度坐标 function getLnglat(e){ var x = e.lnglat.getLng(); var y = e.lnglat.getLat(); document.getElementById("lnglats").innerHTML = x + "," + y; } //清空地图 function clearMap(){ mapObj.clearMap(); document.getElementById("list").innerHTML = '正在读取数据……'; } //索引云图 function getType(iPrivance){ if(iPrivance=="全国"){ mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208)); myCloudList(''); var op={ query:{keywords:""} }; cloudDataLayer.setOptions(op); }else{ myCloudList(iPrivance); var op={ query:{keywords:iPrivance} }; cloudDataLayer.setOptions(op); placeSearch(iPrivance); } } //城市查询 function placeSearch(id) { var MSearch; mapObj.plugin(["AMap.PlaceSearch"], function() { MSearch = new AMap.PlaceSearch({ //构造地点查询类 pageSize:1, pageIndex:1, city:"" //城市 }); AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果 MSearch.search(id); //关键字查询 }); } //城市查询后定位 function keywordSearch_CallBack(data) { var iPoint = data.poiList.pois[0].location; mapObj.setZoomAndCenter(10,iPoint); } </script>

</html>
复制代码

示例demo:http://zhaoziang.com/amap/yuntumo.html

查看原文

赞 0 收藏 1 评论 0

高德开放平台 发布了文章 · 2014-06-10

【云图】如何制作AMF生态鱼缸实体店分布图

摘要:很多商家都有自己的实体店,包括KFC啊,麦当劳啊,姐最爱的眉州小吃啊。那么,商家就会有这样一个需求:把实体店地址标注在地图上,并引导客户驾车或者坐公交去到指定地地址。可是商家一般都不会地图开发,这可怎么办呢?不用担心,我把代码都给大家写好了,鼠标点一点,实体店地图立马呈现!本文以姐最爱的AMF海水农场实体店为例,告诉大家如何在自己的网站上嵌入一个【全国实体店查询地图】。

效果图:


一、数据准备

从官网获取地址数据:http://www.amfaqua.com/

粘贴到excel里,并保存为csv文件。

复制代码
name,address,tel,pic
河南鹤壁旗舰店,河南省鹤壁市淇滨区鹤煤大道西段建业森林半岛,18810067778,
苏州邻瑞店,江苏省苏州市工业园区邻瑞广场三层,18505121300,http://www.amfaqua.com/uploads/allimg/131230/1-131230152K1504.jpg
临汾鼓楼店,山西省临汾市尧都区鼓楼广场步行街,15388570002,http://www.amfaqua.com/uploads/allimg/130904/1-130Z4002334543.jpg
北京三里屯店,北京朝阳区三里屯SOHO三号楼3115,13146542304,http://www.amfaqua.com/uploads/allimg/130916/1-1309161J929643.jpg
北京朝园店,北京朝阳公园西2门朝园市场1165号,010-57900212,http://www.amfaqua.com/uploads/allimg/130826/1-130R6144K0c8.jpg
北京和平里店,北京东城区和平里中街六区6号楼底商-3,010-84211868,http://www.amfaqua.com/uploads/allimg/130626/1-1306261A359553.jpg
北京方恒店,北京市朝阳区望京方恒购物中心一层入口,010-57116389,http://www.amfaqua.com/uploads/allimg/131008/1-13100QI236409.jpg
北京富力城店,北京朝阳区东三环富力广场购物中心地下一层,13601233181,http://www.amfaqua.com/uploads/allimg/140217/1-14021F93U0254.jpg
北京蓝港店,北京市朝阳区蓝色港湾国际商区L-K161(M层),13264336352|18600937784,http://www.amfaqua.com/uploads/allimg/130826/1-130R6134555105.jpg
北京居然店,北京市海淀区西四环世纪金源北楼居然之家一层,13910152440,http://www.amfaqua.com/uploads/allimg/130829/1-130R9162P02T.jpg
北京蓝景店,北京市海淀区北三环蓝景丽家一层入口,13910152440,http://www.amfaqua.com/uploads/allimg/130829/1-130R9162U4395.jpg
北京欧美汇店,北京海淀区中关村欧美汇购物中心一层,010-56420518,http://www.amfaqua.com/uploads/130410/1-1304101RTa34.jpg
天津绿游店,天津市滨海新区泰达绿游天地购物中心215号,13752669203,http://www.amfaqua.com/uploads/allimg/130626/1-1306261F2424P.jpg
北京朝阳大悦城店,北京朝阳区青年路大悦城购物中心三层必胜客对面,010-57187606,http://www.amfaqua.com/uploads/allimg/140217/1-14021GA534M0.jpg
南通中南城店,江苏省南通市崇川区中南城购物中心4层,13255247999,http://www.amfaqua.com/uploads/allimg/130626/1-1306261H215P1.jpg
复制代码

打开云图,http://yuntu.amap.com/datamanager/

新建地图,导入数据,点击预览。

这时云图已经生成了,查看效果:http://yuntu.amap.com/share/iuQzi2

如图:

二、地图展示

获取一个开发者key:http://developer.amap.com/key/

在你的地图代码中引用高德JS:

<script language="javascript" data-original="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>

给出一个地图容器:

加载您的地图:

复制代码
var mapObj;
var cloudDataLayer;
var cloudSearch;
var pBeijing = new AMap.LngLat(116.388474,39.934486);
//初始化地图对象,加载地图
function mapInit(){
mapObj = new AMap.Map("map",{
center: pBeijing, //地图中心点
level:11 //地图显示的比例尺级别
});
myCloudMap();
myCloudList("北京");
}
//云图加载地图
function myCloudMap(){
//地图-云图层
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: '北京'},
clickable:true
};
cloudDataLayer = new AMap.CloudDataLayer('53956704e4b04192f1f4e43d', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图

    AMap.event.addListener(cloudDataLayer, 'click', function (result) {
        var clouddata = result.data;
        //云图麻点
        var infoWindow = new AMap.InfoWindow({
            content: "<a href='http://mo.amap.com/?q=" + clouddata._location.getLat() + "," + clouddata._location.getLng() + "&name=" + clouddata._name + "'><h3>" + clouddata._name + "</h3></a>" + "<img style=\"width:300px;height:220px;overflow:hidden;\" data-original='" + clouddata.pic + "' /><p>地址:" + clouddata._address + "</p>" + "<p>电话:" + clouddata.tel + "</p>",
            size:new AMap.Size(300, 0),
            autoMove:true,
            offset:new AMap.Pixel(0,-5)
        });
        infoWindow.open(mapObj, clouddata._location);
    });
});

}
复制代码

加载列表:

复制代码
//云图加载列表
function myCloudList(id){
//列表
mapObj.plugin(["AMap.CloudDataSearch"], function() {
//绘制多边形
var arr = new Array();
arr.push(new AMap.LngLat(75.585938,52.696361));
arr.push(new AMap.LngLat(134.472656,53.956086));
arr.push(new AMap.LngLat(129.726563,16.467695));
arr.push(new AMap.LngLat(81.914063,20.13847));
arr.push(new AMap.LngLat(75.585938,52.696361));
var searchOptions = {
keywords: id,
pageSize:100
};
cloudSearch = new AMap.CloudDataSearch('53956704e4b04192f1f4e43d', searchOptions); //构造云数据检索类
AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查询成功时的回调函数
AMap.event.addListener(cloudSearch, "error", errorInfo); //查询失败时的回调函数
cloudSearch.searchInPolygon(arr); //多边形检索
});
}
//回调函数-成功
function cloudSearch_CallBack(data) {
var resultStr="";
var resultArr = data.datas;
var resultNum = resultArr.length;
for (var i = 0; i < resultNum; i++) {
resultStr += "

"; resultStr += "

" + (i+1) + "、" + resultArr[i]._name + "

"; resultStr += "

地址:" + resultArr[i]._address + "

"; resultStr += "

电话:" + resultArr[i].tel + "

"; resultStr += "

";
}
document.getElementById("list").innerHTML = resultStr;
}
//回调函数-失败
function errorInfo(data) {
resultStr = data.info;
document.getElementById("list").innerHTML = resultStr;
}
//清空地图
function clearMap(){
mapObj.clearMap();
document.getElementById("list").innerHTML = '正在读取数据……';
}
复制代码

三、城市切换

代码:

复制代码
//索引云图
function getType(iPrivance){
if(iPrivance=="全国"){
mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
myCloudList('');
var op={
query:{keywords:""}
};
cloudDataLayer.setOptions(op);
}else{
myCloudList(iPrivance);
var op={
query:{keywords:iPrivance}
};
cloudDataLayer.setOptions(op);
placeSearch(iPrivance);
}
}
//城市查询
function placeSearch(id) {
var MSearch;
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize:1,
pageIndex:1,
city:"" //城市
});
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
MSearch.search(id); //关键字查询
});
}
//城市查询后定位
function keywordSearch_CallBack(data) {
var iPoint = data.poiList.pois[0].location;
mapObj.setZoomAndCenter(10,iPoint);
}
复制代码

四、驾车查询

驾车公交等路线规划,我们放到高德mobile地图来做。

只需要一句话,即可连接到高德mobile地图,来看一个例子:

http://mo.amap.com/?q=31.234527,121.287689&name=海水农场和平里店

来看看类参考:

所以,我们只需要设置一下中心点的经纬度,还有一个显示的名称即可。

经纬度的获取在云图检索的回调函数里获得。

resultArr[i]._location.getLat()
resultArr[i]._location.getLng()

五、效果图与源代码

全部源代码:

View Code

demo地址:

http://zhaoziang.com/amap/amf_map.html

查看原文

赞 0 收藏 1 评论 0

高德开放平台 发布了文章 · 2014-06-10

【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别?

回答:

1、路线规划,指的是为用户提供3条路线推荐。【高德】在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的。导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息。

2、我们这里说的步行导航和驾车导航,严格的说,应该是路线规划。从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据;如果是步行,过街天桥、地下通道、人行道做为搜索数据。


一、路线规划——驾车

1、驾车路线规划

有三种策略,分别是最短时间、最少费用、最短路径、规避拥堵(参考了实时交通数据,这个比较NB)。

LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC

我们在这里采取驾车插件来做。代码:

复制代码
//驾车导航
function driving_route() {
clearMap();
mapObj.plugin(["AMap.Driving"], function() {
var DrivingOption = {
policy: AMap.DrivingPolicy.LEAST_TIME
};
MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类
AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回导航查询结果
MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线
});
}
复制代码
示意图:

2、驾车最后一公里步行

在最开始一段,和最后一段步行距离的时候,可以用虚线来表示。

代码:

复制代码
//起点到路线的起点 路线的终点到终点 绘制无道路部分
var extra_path1 = new Array();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
var extra_line1 = new AMap.Polyline({
map: mapObj,
path: extra_path1,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed", //虚线
strokeDasharray: [10, 5]
});

var extra_path2 = new Array();  
var path_xy = steps[(steps.length-1)].path;  
extra_path2.push(end_xy);  
extra_path2.push(path_xy[(path_xy.length-1)]);  
var extra_line2 = new AMap.Polyline({  
    map: mapObj,  
    path: extra_path2,  
    strokeColor: "#9400D3",  
    strokeOpacity: 0.7,  
    strokeWeight: 4,  
    strokeStyle: "dashed",  //虚线
    strokeDasharray: [10, 5]  
});  

复制代码

效果图:

3、驾车导航拖拽效果

如果要可拖拽的效果,需要使用另外一个插件,AMap.DragRoute。

代码:

复制代码
//可拖拽的驾车导航
function driving_route_drag(){
clearMap();
var path = [start_xy,end_xy];
mapObj.plugin("AMap.DragRoute",function(){
MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
MDrive.search(); //查询导航路径并开启拖拽导航
});
}
复制代码

示意图:

示例查看:http://zhaoziang.com/amap/zero_5_1.html

二、路线规划——公交

1、公交导航

公交导航不仅是路线相关的,还是根据公交车路线数据,进行查询。使用到插件AMap.LineSearch。

代码:

复制代码
//公交线路查询
function lineSearch() {
clearMap();
//加载公交线路查询插件
//实例化公交线路查询类,只取回一条路线
mapObj.plugin(["AMap.LineSearch"], function() {
var linesearch = new AMap.LineSearch({
pageIndex:1,
city:'北京',
pageSize:1,
extensions:'all'
});
//搜索“518”相关公交线路
linesearch.search('518');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(linesearch, "error", function(e){alert(e.info);
});
});
}
复制代码

效果图:

2、公交线路查询,如518

查询公交线路,需要注明城市。每个城市都可能有518路线,对吧。

代码:

复制代码
//公交线路查询
function lineSearch() {
clearMap();
//加载公交线路查询插件
//实例化公交线路查询类,只取回一条路线
mapObj.plugin(["AMap.LineSearch"], function() {
var linesearch = new AMap.LineSearch({
pageIndex:1,
city:'北京',
pageSize:1,
extensions:'all'
});
//搜索“518”相关公交线路
linesearch.search('518');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(linesearch, "error", function(e){alert(e.info);
});
});
}
复制代码

示意图:

3、通过站点,查公交线路

比如,我在北京东直门,想知道东直门都有哪些公交路线。使用服务插件AMap.StationSearch。

代码:

复制代码
//公交站点查询
function stationSearch() {
clearMap();
//加载公交站点查询插件
mapObj.plugin(["AMap.StationSearch"], function() {
//实例化公交站点查询类
var station = new AMap.StationSearch({
pageIndex: 1, //页码
pageSize: 10, //单页显示结果条数
city:'010' //确定搜索城市
});
station.search('东直门'); //查询
AMap.event.addListener(station, 'complete', stationSearch_CallBack);
AMap.event.addListener(station, 'error', function(e) {alert(e.info);});
});
}
复制代码

示例图:

示例查看:http://zhaoziang.com/amap/zero_5_1.html

三、路线规划——步行

步行,可以过天桥啊,地下通道啊,穿过小区啊,不能走高速公路啊,等特点。

代码:

复制代码
//步行导航
function walking_route() {
var MWalk;
mapObj.plugin(["AMap.Walking"], function() {
MWalk = new AMap.Walking(); //构造路线导航类
AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回导航查询结果
MWalk.search(start_xy, end_xy); //根据起终点坐标规划步行路线
});
}
复制代码

效果图:

示例查看:http://zhaoziang.com/amap/zero_5_1.html

四、小结

驾车,公交,步行的区别

1、从效果图里可以看出,这三种路线规划是搜索的不同数据库。

2、他们的服务插件不一样,都是通过【高德服务插件】进行调用。比原生API接口封装得更加完善,使用起来更加简单。

五、全部源代码

复制代码
<!DOCTYPE HTML>
<html>
<head>

<title>地图路线规划服务</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" data-original="http://webapi.amap.com/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"></script>
</head>
<body onLoad="mapInit()">



坐标: 




  • <button onclick="javascript:driving_route();">驾车路线规划</button>
    <button onclick="javascript:driving_route_drag();">可拖拽插件</button>


  • <button onclick="javascript:transfer_route();">公交路线规划</button>
    <button onclick="javascript:lineSearch();">518路公交车</button>
    <button onclick="javascript:stationSearch();">东直门站点</button>


  • <button onclick="javascript:walking_route();">步行路线规划</button>


  • <button onclick="javascript:clearMap();">清空地图</button>




<script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript data-original='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E")); </script>


</body>

<

script language="javascript">
function setLi(id1,id2){
document.getElementById("box1").style.display = "none";
document.getElementById("box2").style.display = "none";
document.getElementById("box3").style.display = "none";
document.getElementById(id1).style.display = "block";

document.getElementById("iLi1").style.background = "#eee";
document.getElementById("iLi2").style.background = "#eee";
document.getElementById("iLi3").style.background = "#eee";
document.getElementById(id2).style.background = "#fff";

}

var mapObj;
var route_text
var steps;
var polyline;
var MDrive;
var btContent = new Array(); //结果表格数组
var resultStr;//结果拼接string
var resLine = ''; //结果表格对象
//初始化地图对象,加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{
center:new AMap.LngLat(116.397428,39.90923), //地图中心点
level:11 //地图显示的比例尺级别
});
AMap.event.addListener(mapObj,'click',getLnglat); //点击事件
}
//鼠标点击,获取经纬度坐标
function getLnglat(e){
var x = e.lnglat.getLng();
var y = e.lnglat.getLat();
document.getElementById("lnglats").innerHTML = x + "," + y;
}
//清空地图
function clearMap(){
mapObj.clearMap();
document.getElementById("result").innerHTML = ' ';
}
//起、终点
var start_xy = new AMap.LngLat(116.379018,39.865026);
var end_xy = new AMap.LngLat(116.321139, 39.896028);
//驾车导航
function driving_route() {
clearMap();
mapObj.plugin(["AMap.Driving"], function() {
var DrivingOption = {
//驾车策略,包括 LEAST_TIME,LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
policy: AMap.DrivingPolicy.LEAST_TIME
};
MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类
AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回导航查询结果
MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线
});
}
//可拖拽的驾车导航
function driving_route_drag(){
clearMap();
var path = [start_xy,end_xy];
mapObj.plugin("AMap.DragRoute",function(){
MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
MDrive.search(); //查询导航路径并开启拖拽导航
});
}
//导航结果展示
function driving_routeCallBack(data) {
var routeS = data.routes;
if (routeS.length <= 0) {
document.getElementById("result").innerHTML = "未查找到任何结果!
建议:
1.请确保所有字词拼写正确。
2.尝试不同的关键字。
3.尝试更宽泛的关键字。";
}
else{
route_text="";
for(var v =0; v< routeS.length;v++){
//驾车步骤数
steps = routeS[v].steps
var route_count = steps.length;
//行车距离(米)
var distance = routeS[v].distance;
//拼接输出html
for(var i=0 ;i< steps.length;i++){
route_text += "

" + i +"." +steps[i].instruction + "";
}
}
//输出行车路线指示
route_text = " " + route_text + "
路线
  北京南站
  北京西站

";
document.getElementById("result").innerHTML = route_text;
drivingDrawLine();
}
}
//绘制驾车导航路线
function drivingDrawLine(s) {
//起点、终点图标
var sicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
});
var startmarker = new AMap.Marker({
icon : sicon, //复杂图标
visible : true,
position : start_xy,
map:mapObj,
offset : {
x : -16,
y : -40
}
});
var eicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
});
var endmarker = new AMap.Marker({
icon : eicon, //复杂图标
visible : true,
position : end_xy,
map:mapObj,
offset : {
x : -16,
y : -40
}
});
//起点到路线的起点 路线的终点到终点 绘制无道路部分
var extra_path1 = new Array();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
var extra_line1 = new AMap.Polyline({
map: mapObj,
path: extra_path1,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed", //虚线
strokeDasharray: [10, 5]
});

var extra_path2 = new Array();
var path_xy = steps[(steps.length-1)].path;
extra_path2.push(end_xy);
extra_path2.push(path_xy[(path_xy.length-1)]);
var extra_line2 = new AMap.Polyline({
    map: mapObj,
    path: extra_path2,
    strokeColor: "#9400D3",
    strokeOpacity: 0.7,
    strokeWeight: 4,
    strokeStyle: "dashed",  //虚线
    strokeDasharray: [10, 5]
});

var drawpath = new Array();
for(var s=0; s<steps.length; s++){
    drawpath = steps[s].path;
    var polyline = new AMap.Polyline({
        map: mapObj,
        path: drawpath,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeDasharray: [10, 5]
    });
}
mapObj.setFitView();

}
//绘制驾车导航路段
function driveDrawFoldline(num){
var drawpath1 = new Array();
drawpath1 = steps[num].path;
if(polyline != null){
polyline.setMap(null);
}
polyline = new AMap.Polyline({
map: mapObj,
path: drawpath1,
strokeColor: "#FF3030",
strokeOpacity: 0.9,
strokeWeight: 4,
strokeDasharray: [10, 5]
});

mapObj.setFitView(polyline);

}
//公交导航
function transfer_route() {
clearMap();
var trans;
//加载公交换乘插件
mapObj.plugin(["AMap.Transfer"], function() {
transOptions = {
city: '北京市', //公交城市
policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
};
//构造公交换乘类
trans = new AMap.Transfer (transOptions);
//返回导航查询结果
AMap.event.addListener(trans, "complete", transCallBack);
//显示错误信息
AMap.event.addListener(trans, "error", function(e) {alert(e.info);});
//根据起、终点坐标查询公交换乘路线
trans.search(start_xy,end_xy);
});
}
function transCallBack(data) {
var btCount = data.count;
var btPlans = data.plans;
var btOrigin = data.origin;
var btDestination = data.destination;
var btTaxiCost = data.taxi_cost;
var startName = "北京南站"; //可以使用地理编码解析起点和终点坐标
var endName = "北京站";
var BusArr = [];
var WalkArr = [];
var onbus = new Array();
var onwalk = new Array();
//结果输出用表格展现,输出表格头
var resTableHeader = "

<

table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">

 乘车方案 导航信息";
btContent.push(resTableHeader);
//遍历每种换乘方案
for (var i = 0; i < btPlans.length; i++) {
var btDistance = btPlans[i].distance;
var btseg = btPlans[i].segments;
var lineNameArr = new Array();
var resLine = "";
var naviInfo = '';
var lineName;
for(var j = 0; j < btseg.length; j++) {
naviInfo += btseg[j].instruction + "
";
if(btseg[j].transit_mode =="WALK") {
if(i===0) {
WalkArr.push(btseg[j].transit.path);
}
}
else {
lineName = btseg[j].transit.lines[0].name;
lineNameArr.push(lineName);
if(i===0) {
BusArr.push(btseg[j].transit.path);
}
}
}
lineName = lineNameArr.join("-->");
drawBuschangeLine(btOrigin,btDestination,BusArr,WalkArr);
//结果输出用表格展现,输出表格内容
resLine = "

<

table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"
+ "

"+ lineName +""
+ Getdistance(btDistance) + "" + "起点 " + startName + "" + ""+ naviInfo +""+ "终点 " + endName + "";
btContent.push(resLine);
}
resultStr = btContent.join("");
//写到result这个div
document.getElementById("result").innerHTML = resultStr;
//取出需要加换乘、步行图标的位置,这里仅画出第一个换乘方案
var sinseg = btPlans[0].segments;
for(var a in sinseg) {
if(sinseg[a].transit_mode =="WALK") {
onwalk.push(sinseg[a].transit.origin);
}
else {
onbus.push(sinseg[a].transit.on_station.location);
}
}
addMarker(onbus);
mapObj.setFitView();
}
//距离,米换算为千米
function Getdistance(len) {
if (len <= 1000) {
var s = len;
return s + "米";
} else {
var s = Math.round(len / 1000);
return "约" + s + "公里";
}
}
//绘制路线,仅第一条
function drawBuschangeLine(startPot,endPot,BusArr,WalkArr) {
//自定义起点,终点图标
var sicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
});
var eicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
});
//绘制起点,终点
var stmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(startPot.lng,startPot.lat), //基点位置
icon:sicon, //复杂图标
offset:{x:-16,y:-34} //相对于基点的位置
});
var endmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(endPot.lng,endPot.lat), //基点位置
icon:eicon, //复杂图标
offset:{x:-16,y:-34} //相对于基点的位置
});
//绘制乘车的路线
for(var j in BusArr) {
busPolyline = new AMap.Polyline({
map:mapObj,
path:BusArr[j],
strokeColor:"#005cb5",//线颜色
strokeOpacity:0.8,//线透明度
strokeWeight:6//线宽
});
}
//绘制步行的路线
for (var i in WalkArr) {
walkPolyline = new AMap.Polyline({
map:mapObj,
path:WalkArr[i],
strokeColor : "#6EB034", //线颜色
strokeOpacity : 0.6, //线透明度
strokeWeight : 6//线宽
});
}

}
function addMarker(busmar) {
for (var i = 0; i < busmar.length; i++) {
var busmarker = new AMap.Marker({
icon : new AMap.Icon({
image: "http://api.amap.com/Public/images/js/busroute.png",
size: new AMap.Size(20, 20),
imageOffset: new AMap.Pixel(-33, -3)
}),
position : busmar[i],
offset : {
x : -25,
y : -25
},
map:mapObj
});
}
}
//公交线路查询
function lineSearch() {
clearMap();
//加载公交线路查询插件
//实例化公交线路查询类,只取回一条路线
mapObj.plugin(["AMap.LineSearch"], function() {
var linesearch = new AMap.LineSearch({
pageIndex:1,
city:'北京',
pageSize:1,
extensions:'all'
});
//搜索“518”相关公交线路
linesearch.search('518');
AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
AMap.event.addListener(linesearch, "error", function(e){alert(e.info);
});
});
}
function lineSearch_Callback(data) {
var lineArr = data.lineInfo;
var lineNum = data.lineInfo.length;
if(lineNum == 0) {
resLine = data.info;
}
else {
resLine += "

"; for(var i = 0; i "; resLine += ""; //绘制第一条路线 if(i==0) drawbusLine(startPot,endPot,pathArr); } resLine += "

" + lineName + "

首末车时间:" + stime.substring(0, 2) + ":" + stime.substring(2, 4) + '-' + etime.substring(0, 2) + ":" + etime.substring(2, 4) + ";" + "全长:" + distance + "公里;" + "所属公司:" + company+"

"
document.getElementById('result').innerHTML = resLine;
}
}
//绘制路线
function drawbusLine(startPot,endPot,BusArr) {
//自定义起点,终点图标
var sicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
});
var eicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size: new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
});
//绘制起点,终点
var stmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(startPot.lng,startPot.lat), //基点位置
icon:sicon, //复杂图标
offset:{x:-16,y:-34}, //相对于基点的位置
zIndex:10
});
var endmarker = new AMap.Marker({
map:mapObj,
position:new AMap.LngLat(endPot.lng,endPot.lat), //基点位置
icon:eicon, //复杂图标
offset:{x:-16,y:-34}, //相对于基点的位置
zIndex:10
});
//绘制乘车的路线
busPolyline = new AMap.Polyline({
map:mapObj,
path:BusArr,
strokeColor:"#005cb5",//线颜色
strokeOpacity:0.8,//线透明度
strokeWeight:6//线宽
});
mapObj.setFitView();
}
//公交站点查询
function stationSearch() {
clearMap();
//加载公交站点查询插件
mapObj.plugin(["AMap.StationSearch"], function() {
//实例化公交站点查询类
var station = new AMap.StationSearch({
pageIndex: 1, //页码
pageSize: 10, //单页显示结果条数
city:'010' //确定搜索城市
});
station.search('东直门'); //查询
AMap.event.addListener(station, 'complete', stationSearch_CallBack);
AMap.event.addListener(station, 'error', function(e) {alert(e.info);});
});
}
/*
*公交站点查询返回数据解析
*/
function stationSearch_CallBack(searchResult) {
clearMap();
var resultStr = ""; //结果拼接String
var resultString = searchResult.info;
var stationArr = searchResult.stationInfo;
var searchNum = stationArr.length;
var iMarker = searchResult.location;

if(searchNum > 0) {
    resultStr += "<div id=\"divid" + i + "\"><table>";
    for(var i=0; i<searchNum; i++) {
        //结果输出用表格展现
        resultStr += "<tr><td><h3><font color=\"#00a6ac\">" + stationArr[i].name + "</font></h3></td></tr>";

        resultStr += "<tr><td>途径该站点的公交线路:</td></tr><tr><td>";
        var stationBusArr = stationArr[i].buslines;
        for(var j =0; j<stationBusArr.length; j++) {
            resultStr += stationBusArr[j].name + "<br/>";
        }
    }
    resultStr += "</td></tr></table></div>"
    document.getElementById("result").innerHTML = resultStr;

    var stmarker = new AMap.Marker({
        map:mapObj,
        position:iMarker
    });
}
else {
    document.getElementById("result").innerHTML = resultString;
}

}
//步行导航
function walking_route() {
var MWalk;
mapObj.plugin(["AMap.Walking"], function() {
MWalk = new AMap.Walking(); //构造路线导航类
AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回导航查询结果
MWalk.search(start_xy, end_xy); //根据起终点坐标规划步行路线
});
}
//导航结果展示
function walk_routeCallBack(data) {
var routeS = data.routes;
if (routeS.length <= 0) {
document.getElementById("result").innerHTML = "未查找到任何结果!
建议:
1.请确保所有字词拼写正确。
2.尝试不同的关键字。
3.尝试更宽泛的关键字。";
}
else {
route_text="";
for(var v =0; v< routeS.length;v++){
//步行导航路段数
steps = routeS[v].steps;
var route_count = steps.length;
//步行距离(米)
var distance = routeS[v].distance;
//拼接输出html
for(var i=0 ;i< steps.length;i++) {
route_text += "

" + i +"." +steps[i].instruction + "";
}
}
//输出步行路线指示
route_text = " " + route_text + "
路线
  北京南站
  北京站

";
document.getElementById("result").innerHTML = route_text;
walkingDrawLine();
}
}
//绘制步行导航路线
function walkingDrawLine() {
//起点、终点图标
var sicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -180)
});
var startmarker = new AMap.Marker({
icon : sicon, //复杂图标
visible : true,
position : start_xy,
map:mapObj,
offset : {
x : -16,
y : -40
}
});
var eicon = new AMap.Icon({
image: "http://api.amap.com/Public/images/js/poi.png",
size:new AMap.Size(44,44),
imageOffset: new AMap.Pixel(-334, -134)
});
var endmarker = new AMap.Marker({
icon : eicon, //复杂图标
visible : true,
position : end_xy,
map:mapObj,
offset : {
x : -16,
y : -40
}
});
//起点到路线的起点 路线的终点到终点 绘制无道路部分
var extra_path1 = new Array();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
var extra_line1 = new AMap.Polyline({
map: mapObj,
path: extra_path1,
strokeColor: "#9400D3",
strokeOpacity: 0.7,
strokeWeight: 4,
strokeStyle: "dashed",
strokeDasharray: [10, 5]
});

var extra_path2 = new Array();
var path_xy = steps[(steps.length-1)].path;
extra_path2.push(end_xy);
extra_path2.push(path_xy[(path_xy.length-1)]);
var extra_line2 = new AMap.Polyline({
    map: mapObj,
    path: extra_path2,
    strokeColor: "#9400D3",
    strokeOpacity: 0.7,
    strokeWeight: 4,
    strokeStyle: "dashed",
    strokeDasharray: [10, 5]
});

for(var s=0; s<steps.length; s++) {
    var drawpath = steps[s].path;
    var polyline = new AMap.Polyline({
        map: mapObj,
        path: drawpath,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4
    });
}
mapObj.setFitView();

}
</script>
</html>
复制代码

示例查看:http://zhaoziang.com/amap/zero_5_1.html

查看原文

赞 0 收藏 0 评论 0

高德开放平台 发布了文章 · 2014-06-06

高德LBS开放平台常见问题解答

高德LBS开放平台常见问题解答
一、使用须知
二、坐标相关问题
三、标注问题
四、定位相关问题
五、云图
六、地图API
1)Javascript API
2)Android API
3)iOS API
4)Windows Phone 及win8 API
5)URI API

▼使用须知
Q:使用高德地图API产品是否需要付费?
A:不需要,为了更好的提供服务,请您将企业名称(个人姓名)、联系人、应用名称以及您使用的key通过邮箱发送给我们。

Q:高德地图API的服务调用有什么限制?
A:地理/逆地理编码,每日每Key调用限制200000次,每10分钟内调用次数限制10000次
Place查询,每日每Key调用限制100000次,每10分钟内调用次数限制50000次
输入提示,每日每Key调用限制100000次,每10分钟内调用次数限制50000次
路线规划,每日每Key调用限制100000次,每10分钟内调用次数限制5000次
道路查询,每日每Key调用限制25000次,每10分钟内调用次数限制2500次
静态地图,每日每Key调用限制25000次,每10分钟内调用次数限制2500次
定位,每日每Key调用限制100000次,每10分钟内调用次数限制5000次

Q:高德地图API使用条款
A:请参见http://api.amap.com/terms

Q:高德地图API支持哪些开发平台?
A:在移动端,支持Android、iOS、WindowsPhone,在Web端支持Javascript语言的H5接口,在服务器端支持REST方式调用的服务接口。

Q:如何申请key?如何注册key?
A:详情参见http://api.amap.com/key/

Q:Rest key的申请?
A:所有key相同,多个应用可以用同一个key,但是调用次数有限制。

Q:为什么Key无法使用?
A:1)key申请10分钟后生效。
2)不存在——key设置错误。
3)请检查网络,有问题请发邮箱至api@autonavi.com

Q:2d与3d地图的区别是什么?
A:2D 地图是栅格地图,采用切片的方式显示地图;3D 地图为矢量地图,采用终端绘制地图的方式,地图功能更加丰富。

Q:高德SDK有英文版的吗?
A:目前只能显示中文地图。

Q:高德现在有查询行政区域信息的API吗?
A:JS API1.1版本有行政区划功能,可以去官网上下载相关的文档和demo文件http://api.amap.com/javascript/down

Q:如何进行商务合作?
A:请发邮件至jidong.wu@autonavi.com

▼坐标相关问题
Q:高德地图API使用的坐标系统是什么?
A:高德地图API在中国大陆地区使用的坐标系为国家规定的gcj-02坐标系。

Q:如何从其他坐标系转到高德坐标系?
A:高德不提供坐标转换服务,有关GPS点绘制在高德地图上的方法,请参考:(http://bbs.amap.com/thread-18617-1-2.html

Q:自己取的点为什么在高德地图上显示不准?
A:请考虑以下2种情况:
1)用户自己坐标可能不是GCJ-02,需要进行坐标转换
2)经纬度顺序写反了,移动端先维度后经度,JS先经度后维度。

Q:为什么GPS获取的原始坐标显示在地图上为什么会出现偏差?
A:高德地图的对外提供的坐标都是经过国家测绘局加密处理的,符合国家测绘局对地理信息保密要求,因此如果使用GPS获得的原始坐标在高德地图显示,会有偏差,需要将原始坐标经过加密转换,转化为高德坐标,请发邮件至api@autonavi.com。

▼标注问题
Q:如何进行标注?怎样将我的店铺展示在高德地图上?
A:请查看以下链接 http://bbs.amap.com/thread-5797-1-1.html 关于标注进度等问题,可以发邮件到zhao.yang@autonavi.com 询问。

Q:我在高德地图上标注了店铺,出现变更后如何更改地址等信息?
A:请查看以下链接 http://bbs.amap.com/thread-5797-1-1.html 关于标注进度等问题,可以发邮件到zhao.yang@autonavi.com 询问。

Q:标注收费吗?
A:不收费。

▼定位相关问题
Q:如何使用GPS定位?
A: 首先请确保手机自身的GPS卫星定位功能处于开启状态另外由于室内无GPS信号请确保在室外能够接收到GPS卫星信号的地方进行定位。

Q:定位成功后能返回哪些信息?
A:GPS定位后,可得到定位点的经纬度坐标和定位精度;如果是网络定位,除了坐标信息和定位精度外,还可获取定位点的所在的省、市名称、区域编码以及定位描述等信息。

Q:注册定位监听后,满足什么条件才会将其触发?
A:如果网络定位,监听按照所设置的时间参数触发;如果是GPS定位,则按照设定的距离和时间因素触发。

▼云图
Q:云图为用户提供的存储空间多大?
A:每个高德账号500M存储空间,若需更多,请联系我们(http://bbs.amap.com/forum-81-1.html)。

Q:为何使用我的key请求云图存储服务显示失败(invalid)?
A:请先在API官网_密钥管理频道(超链接:http://api.amap.com/key/):开启此key的云存储服务。

A:云图数据管理台的数据是否可以导出?
Q:暂时未支持。请关注后续版本的规划。

A:如何删除云数据图层?
Q:调用cloudDatalayer.setMap(null),实现删除你添加的云数据图层。

▼地图API
Javascript API
Q: 我怎么开始使用高德地图 Javascript API?
A: 您可以通过开发指南学习如何使用高德地图 JavaScript API。http://api.amap.com/javascript/reference/map

Q: 高德地图 JavaScript API 能离线使用么?
A: 高德地图 Javascript API 为在线地图服务接口,不能提供脱机服务,使用 Javascript API 提供的服务必须联网使用。

Q:新版服务插件和原有服务的差别?
A: 新版服务以插件形式提供,使用新版服务需加载服务插件,详情请见参考手册http://api.amap.com/Javascript/reference/search_plugin,相关示例;新版服务插件丰富和规范了返回结果数据,在出行导航查询中整合步行方式;API将继续维护旧版服务API,但不会进行更新,我们鼓励用户使用新版服务API。

Q:如何获取POI类型对照表和城市编码对照表?
A: 获取POI类型对照表和城市编码对照表请到相关下载。http://api.amap.com/Javascript/down

Q: 从GPS获取的原始坐标显示在地图上为什么会出现偏差?
A: 高德地图的对外提供的坐标都是经过国家测绘局加密处理的,符合国家测绘局对地理信息保密要求,因此如果使用GPS获得的原始坐标在高德地图显示,会有偏差,需要将原始坐标经过加密转换,转化为高德坐标。

Q: 高德地图API街景覆盖城市有哪些?
A:高德地图街景覆盖城市共33个,分别为:杭州,南京,成都,西安,拉萨,昆明,烟台,沈阳,哈尔滨,长春,常州,南通,林芝,泰安,日照,那曲,东营,日喀则,德州,滨州,聊城,莱芜,郑州,洛阳,平顶山,开封,安阳,信阳,新乡,焦作,商丘,周口,驻马店。

Q:添加大量marker导致地图反应慢怎么办?
A:添加marker数量超过300时,建议使用点聚合(http://api.amap.com/javascript/example/num/0509)或者进行数据抽稀。数据抽稀即用少量具有代表性的点代替全量的点

▼Android API
Q:如何进行开发环境配置?
A:您可以参照开发指南http://api.amap.com/android/guide/project_set 进行设置

Q:我怎么开始使用高德地图 Android SDK?
A: 您可以通过开发指南http://api.amap.com/Android/guide学习如何使用高德地图 Android SDK。

Q:2D 地图和 3D 地图的差别?
A:2D 地图是栅格地图,采用切片的方式显示地图;3D 地图为矢量地图,采用终端绘制地图的方式,地图功能更加丰富。2D 地图相对3D地图,优点:栅格版相对矢量版容量小,耗电少并且cpu使用占比低 ; 缺点:比较耗流量,无旋转,离线地图和倾斜等功能。

Q:如何计算两点之间的距离?
A: 可以通过 AMapUtils.calculateLineDistance(LatLng startLatlng LatLng endLatlng) 来计算两点距离,单位:米。

Q:V2.2.X 搜索和 V2.0.4 搜索之间的差别?
A:V2.2.X 和 V2.0.4 的搜索接口区别比较大。V2.2.X 在搜索能力上做了比较大的提升,是目前我们主推的搜索服务,建议用户优先选择。

Q:为什么使用高德地图 API 进行开发时会提示“key 不存在”?
A: 高德地图 Android SDK 在地图显示、定位、搜索功能都需要进行 key 验证。如果您的工程尚未增加 key,请点击申请Key添加,否则将会导致这些功能无法正常使用。

Q:高德地图 Android SDK 如何在地图初始化时显示指定的城市?
A:首先您需要获得指定城市中心点的经纬度坐标之后可以使用 AMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLngzoom))方法设置地图的可视区域,将指定城市中心点的经纬度坐标作为参数传入。

▼iOS API
Q: 如何进行开发环境配置?
A: 请您参见开发之南http://api.amap.com/ios/guide/project_set进行设置;

Q:为什么使用高德地图 API 进行开发时会提示“key 不存在”?
A:高德地图 Android SDK 在地图显示、定位、搜索功能都需要进行 key 验证。如果您的工程尚未增加 key,请点击申请Key添加,否则将会导致这些功能无法正常使用。

Q: 我怎么开始使用高德地图iOS SDK?
A:您可以通过开发指南学习http://api.amap.com/Ios/guide 如何使用高德地图iOS SDK。

Q: 地图接口和数据能离线使用么?
A:高德地图iOS SDK支持矢量地图离线下载使用,您可以通过开发指南的离线地图章节http://api.amap.com/ios/guide/map_offline了解更多。

Q:V2.1.X搜索和V2.0.6搜索之间的差别?
A:V2.1.X和V2.0.6的搜索接口区别比较大,V2.1.X在搜索能力上做了比较大的提升,是目前我们主推的搜索服务,建议用户优先选择。

Q:可以同时使用V2.0.6搜索和V2.1.X地图?
A:可以同时使用,只要分别导入对应的库文件即可。

Q: 是否使用UDID?
A:从V2.06版本彻底去除UUID以及“uniqueIdentifier“的使用,用户可以使用strings libMAMapKit.a | grep -ni 'uniqueIdentifier' 命来来进行检测是否使用了“uniqueIdentifier“。

▼Windows Phone 及win8 API
Q:win8 sdk 是否支持WIN8.0?win8 sdk 能否加载到unity3d中?
A:仅支持Win8.1,Win8.0已经不支持。没有在Unity3D中使用过SDK,您可以尝试一下。

Q:如何调整MMarker 移动时的角度
A:MarkerMoveAlong 是直接让标注按照一定的路线来移动,不需要改变图片的角度,MarkerMoveTo 是从标注点移动到终点,你可以设置移动过程中标注点的角度

Q: 我怎么开始使用高德地图Windows Phone SDK?
A: 您可以通过开发指南学习如何使用高德地图Windows Phone SDK

Q: 地图接口和数据能离线使用么?
A: 高德地图Windows Phone SDK为在线地图服务接口,目前不支持离线地图,提供的服务必须联网使用。

Q:V1.X.X 与 V2.X.X 地图有什么差别?
A: V1.X.X是栅格地图,采用地图切片的方式显示地图;V2.X.X是矢量地图,采用终端绘制地图的方式,地图功能更加丰富,且支持3D显示。

Q:V1.X.X 与 V2.X.X 搜索有什么差别?
A: V1.X.X和V2.X.X的搜索接口区别比较大,V2.X.X在搜索能力上做了比较大的提升,是目前我们主推的搜索服务,建议用户优先选择。

Q:V1.X.X 与 V2.X.X 适用的Windows Phone版本?
A: V1.X.X适用于Windows Phone OS 7.X版本, V2.X.X适用于Windows Phone OS 8.X。

▼URI API
Q:调用URI API导航接口后,图标直接定位到了导航的目的地,不能显示导航路线信息。
A:通过第三方调用高德地图的导航功能,在GPS没有定位成功的情况下,地图中心点显示的是目的地位置(在图面上展示的效果就是目的图标+终点图标)在GPS定位成功之后,才会发起网络请求,请求成功之后,才会有路线。请检查定位是否成功。

Q:为什么从我开发的APP中调起高德地图时,启动导航网络速度很慢,网络要求也很高,但是同样的网络环境下我打开
高德地图进行导航,速度就很快。
A:您好,从非高德地图调用高德地图的导航功能,GPS定位成功之后,才请求网络数据,GPS定位需要时间。而从高德地图内部进入导航功能,有了位置(无论是GPS还是非GPS)就请求网络数据。如此第三方调用就比较慢。

Q:我从我自己的APP 通过URI调用高德地图导航,定位后起点和终点重合在一起了?
A:当通过第三方调用高德地图的导航功能时,在GPS没有定位成功的情况下,地图中心点显示的是目的地位置(在图面上展示的效果就是起点图标+终点图标)在GPS定位成功之后,才会发起网络请求,请求成功之后,才会有路线。所以,请您确认自己的GPS开启,并且定位成功。

原帖链接:http://bbs.amap.com/thread-21221-1-1.html

查看原文

赞 4 收藏 9 评论 1

认证与成就

  • 获得 38 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2014-05-08
个人主页被 1.4k 人浏览