1、根据地址定位
接口 |
AMap.Autocomplete |
||||||||||||||||||||||||||||||||||||||||
说明 |
根据详细或者模糊地址信息在地图中进行定位 |
||||||||||||||||||||||||||||||||||||||||
参数 |
city |
可选，城市或者其他地址信息，默认“全国” |
|||||||||||||||||||||||||||||||||||||||
Input |
可选，用来指定一个input输入框，自动生成下拉选择列表 |
||||||||||||||||||||||||||||||||||||||||
返回值 |
回调地图定位 |
||||||||||||||||||||||||||||||||||||||||
示例 |
|
||||||||||||||||||||||||||||||||||||||||
2、地址解析经纬度
接口 |
AMap.Geocoder |
|
说明 |
根据地址获取经纬度 |
|
参数 |
city |
可选，城市或者其他地址信息，默认“全国” |
Input |
可选，用来指定一个input输入框，获取对应的地图信息 |
|
status |
回调验证信息，complete为成功,error失败 |
|
Result |
返回的地图信息 |
|
Address |
地址 |
|
返回值 |
回调地图定位 |
|
示例 |
AMap.plugin('AMap.Geocoder',function(){ var geocoder = new AMap.Geocoder({ city: ""//城市，默认：“全国” }); var input = document.getElementById('input'); input.onchange = function(e){ var address = input.value; geocoder.getLocation(address,function(status,result){ if(status=='complete'&&result.geocodes.length){ } }); |
|
3、中英文切换
接口 |
setLang |
|
说明 |
地图语言切换 |
|
参数 |
String |
En 英文 zh_en 中英文 zh_cn 中文 |
返回值 |
||
示例 |
Html <div id="mapContainer"></div> <div class="button-group"> <input id="en" type="button" class="button" value="显示英文底图" /> <input id="zh_en" type="button" class="button" value="显示中英文对照底图" /> <input id="zh_cn" type="button" class="button" value="显示中文底图" /> </div> Js var map = new AMap.Map('mapContainer', {//初始化地图 center: [121.498586, 31.239637]//中心点 });
['en', 'zh_en', 'zh_cn'].forEach(function(btn) { var button = document.getElementById(btn); AMap.event.addDomListener(button,'click',clickListener) //给btn添加单击事件 }); function clickListener() { map.setLang(this.id);//设置语言 } |
|
4、电子围栏绘制
接口 |
AMap.MouseTool |
|
说明 |
绘制覆盖物 |
|
方法 |
marker |
添加标记 |
polyline |
画线 |
|
polygon |
画多边形 |
|
circle |
画圆 |
|
返回值 |
|
|
示例 |
var mouseTool = new AMap.MouseTool(map); mouseTool.marker({offset:new AMap.Pixel(-14,-11)}); mouseTool.polyline(); mouseTool.polygon(); mouseTool.circle(); |
|
5、交通态势
接口 |
AMapUI.loadUI |
|
说明 |
实时交通 |
|
参数 |
['control/BasicControl'] |
模块名称 |
position |
控件位置 |
|
返回值 |
||
示例 |
//创建地图 var map = new AMap.Map('container'); AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
//实时交通控件 map.addControl(new BasicControl.Traffic({ position: 'lb'//left bottom, 左下角 }));
}); |
|
6、未来七天天气查询
接口 |
AMap.weather |
||
方法 |
getLive(district:String, callback:function(ErrorStatus,WeatherLiveResult))
|
查询实时天气信息 district支持城市名称/区域编码（如：“杭州市”/“330100”） 当请求成功时ErrorStatus为null，当请求不成功时ErrorStatus为Obj
|
|
getForecast(district:String, callback:function(ErrorStatus,WeatherForecastResult))
|
查询四天预报天气，包括查询当天天气信息 district支持城市名称/区域编码（如：“杭州市”/“330100”） 当请求成功时ErrorStatus为null，当请求不成功时ErrorStatus为Obj
|
||
说明 |
天气预报 |
||
参数 |
err |
返回的验证信息 |
|
data |
返回的天气信息 |
||
返回值 |
返回天气信息 |
||
示例 |
AMap.service('AMap.Weather', function() { var weather = new AMap.Weather(); //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市 weather.getLive('沈阳市', function(err, data) { if (!err) { 城市/区 data.city 天气： data.weather 温度： data.temperature 风向： data.windDirection 风力： data.windPower 空气湿度： data.humidity 发布时间： data.reportTime }); //未来4天天气预报 weather.getForecast('南昌市', function(err, data) { if (err) {return;} var str = []; for (var i = 0,dayWeather; i < data.forecasts.length; i++) { }); }); |
||
7、GPS多点绘制轨迹，如果点不够密集，可能会出现轨迹为折线的情况
接口 |
AMap.Polyline |
说明 |
根据经纬度绘制直线 |
返回值 |
|
示例 |
/ var Polyline = new AMap.Polyline({ map: map, path: {[’’,’’],[ ’’,’’]},//经纬度 strokeColor: "#FF33FF",//线颜色 strokeOpacity: 1,//线透明度 strokeWeight: 3,//线宽 strokeStyle: "solid"//线样式 }); |
8、点与点线路规划绘制
为了避免出现点与点之间直线连接轨迹绘制的弊端，在GPS点集合较少的情况下，使用线路推荐路径绘制会更加平滑
1、驾车
接口 |
AMap.Driving |
|
方法 |
search |
需要设置出发点和到达点。出发点和到达点支持地点名称，也支持精确的经纬度 |
说明 |
根据起终点规划驾车导航路线 |
|
返回值 |
回调函数返回查询结果的状态status和查询结果result。当status为complete的时候表示查询到有效结果。 |
|
示例 |
//构造路线导航类 var driving = new AMap.Driving({ map: map, panel: "panel" }); // 根据起终点名称规划驾车导航路线 driving.search([ {keyword: '北京市地震局(公交站)',city:'北京'}, {keyword: '亦庄文化园(地铁站)',city:'北京'} ]); driving.search([116.379028, 39.865042],[116.427281, 39.903719] ,function(status, result){}); |
|
2、公交线路
接口 |
AMap.Transfer |
|
方法 |
search |
需要设置出发点和到达点。出发点和到达点支持地点名称，也支持精确的经纬度 |
参数 |
status |
返回成功失败标记 |
Result |
公交线路信息 |
|
说明 |
根据起终点规划公交导航路线 |
|
返回值 |
回调函数返回查询结果的状态status和查询结果result。当status为complete的时候表示查询到有效结果。 |
|
示例 |
//加载公交换乘插件 AMap.service(["AMap.Transfer"], function() { var transOptions = { map: map, city: '北京市', //公交城市 //cityd:'乌鲁木齐', policy: AMap.TransferPolicy.LEAST_TIME //乘车策略 }; //构造公交换乘类 var trans = new AMap.Transfer(transOptions); //根据起、终点坐标查询公交换乘路线 trans.search([{keyword:'北京市地震局(公交站)'},{keyword:'望京西园4区'}], function(status, result){ }); }); |
|
3、步行
接口 |
AMap.Walking |
|
方法 |
search |
需要设置出发点和到达点。出发点和到达点支持地点名称，也支持精确的经纬度 |
参数 |
status |
返回成功失败标记 |
Result |
步行线路信息 |
|
说明 |
根据起终点规划步行导航路线 |
|
返回值 |
回调函数返回查询结果的状态status和查询结果result。当status为complete的时候表示查询到有效结果。 |
|
示例 |
//步行导航 AMap.service(["AMap.Walking"], function() { var MWalk = new AMap.Walking({ map: map, panel: "panel" }); //构造路线导航类 //根据起终点坐标规划步行路线 //MWalk.search([116.379028,39.865042], [116.427281,39.903719], function(status, result){ MWalk.search([ {keyword: '北京市地震局(公交站)'}, {keyword: '亦庄文化园(地铁站)'} ], function(status, result) { }); }); |
|
4、骑行
接口 |
AMap.Riding |
|
方法 |
search |
需要设置出发点和到达点。出发点和到达点支持地点名称，也支持精确的经纬度 |
说明 |
根据起终点规划骑行导航路线 |
|
返回值 |
回调函数返回查询结果的状态status和查询结果result。当status为complete的时候表示查询到有效结果。 |
|
示例 |
//骑行导航 var riding = new AMap.Riding({ map: map, panel: "panel" }); //根据起终点坐标规划骑行路线 riding.search([116.397933,39.844818],[116.440655,39.878694]); }); |
|
9、Marker标注绘制、和支持点击事件
接口 |
AMap.Marker |
|
说明 |
点标注 |
|
参数 |
position |
根据经纬度标注 |
map |
地图对象 |
|
返回值 |
||
示例 |
var marker = new AMap.Marker({map: map, position: [116.486409,39.921489]}); marker.on('click', function() { console.log(1); }); |
|
10、提示框InfoWindow的弹出显示
接口 |
AMap.InfoWindow |
||
方法 |
open |
弹出提示 |
|
说明 |
天气预报 |
||
参数 |
content |
弹出内容 |
|
offset |
偏移位置 |
||
返回值 |
|
||
示例 |
var infoWin = new AMap.InfoWindow({ content: 内容, offset: new AMap.Pixel(0, -20)//偏移 }); infoWin.open(map, [116.486409,39.921489]);//弹出提示 |
||
11、设置主题
接口 |
setMapStyle |
|
说明 |
设置地图主题 |
|
参数 |
enName |
地图主题key(String) keys：normal、dark、light、fresh、grey、graffiti、whitesmoke、macaron、blue、darkblue、wine |
返回值 |
|
|
示例 |
function refresh(enName) { map.setMapStyle('amap://styles/'+enName); } |
|