地理编码
- 地址 -> 坐标
Geocoder.getLocation，使用地理编码接口，根据地址转获取经纬度位置。
var map = new AMap.Map("container", {
resizeEnable: true
});
var geocoder,marker;
function geoCode() {
if(!geocoder){
geocoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认："全国"
});
}
var address = document.getElementById('address').value; // 即用户输入的地址值value
geocoder.getLocation(address, function(status, result) {
if (status === 'complete'&&result.geocodes.length) {
var lnglat = result.geocodes[0].location
document.getElementById('lnglat').value = lnglat;
if(!marker){
marker = new AMap.Marker();
map.add(marker);
}
marker.setPosition(lnglat);
map.setFitView(marker);
}else{alert(JSON.stringify(result))}
});
// addresses Array 批量地理编码转换
// geocoder.getLocation(addresses, function(status, result) {
// if (status === 'complete'&&result.geocodes.length) {
// for(var i=0;i- 坐标 -> 地址
function regeoCode() {
if(!geocoder){
geocoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认：“全国”
radius: 1000 //范围，默认：500
});
}
var lnglat = document.getElementById('lnglat').value.split(',');
if(!marker){
marker = new AMap.Marker();
map.add(marker);
}
marker.setPosition(lnglat);
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
document.getElementById('address').value = address;
}else{alert(JSON.stringify(result))}
});
}
map.on('click',function(e){ // 地图点击切换
document.getElementById('lnglat').value = e.lnglat;
regeoCode();
})
document.getElementById("regeo").onclick = regeoCode; // 按钮点击切换
一次查询多个经纬度的地址
var map = new AMap.Map("container", {
resizeEnable: true
});
var posDiv = document.getElementById('postions');
var lnglats = [],markers = [];
map.on('click',function(e){
if(lnglats.length < 10){
lnglats.push(e.lnglat);
var index = lnglats.length;
var marker = new AMap.Marker({
content:''+lnglats.length+'',
position: e.lnglat
});
markers.push(marker);
map.add(marker);
var newItem =
''+
''+e.lnglat+''+
''+
'';
document.getElementById('blank_item').insertAdjacentHTML('beforebegin',newItem)
}
})
var geocoder;
function regeoCode() {
if(!geocoder){
geocoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认：“全国”
radius: 1000 //范围，默认：500
});
}
geocoder.getAddress(lnglats, function(status, result) {
var address = []
if (status === 'complete'&&result.regeocodes.length) {
for(var i=0;i< result.regeocodes.length;i+=1){
document.getElementById("address"+(i+1)).value = result.regeocodes[i].formattedAddress
}
}else{
alert(JSON.stringify(result))
}
});
}
function clear(){
map.remove(markers);
markers = [];
lnglats = []
posDiv.innerHTML='点击地图添加经纬度';
}
document.getElementById("regeo").onclick = regeoCode;
document.getElementById("clear").onclick = clear;
行政区查询
- 行政区边界查询
使用DistrictSearch.search获取某个行政区的边界信息，并绘制行政区划边界。
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 10 //地图显示的缩放级别
});
var district = null;
var polygons=[];
function drawBounds() {
//加载行政区划插件
if(!district){
//实例化DistrictSearch
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'district' //查询行政级别为 市
};
district = new AMap.DistrictSearch(opts);
}
//行政区查询
// 使用setLevel修改查询级别
district.setLevel(document.getElementById('level').value)
district.search(document.getElementById('district').value, function(status, result) {
map.remove(polygons)//清除上次结果
polygons = [];
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.4,
fillColor: '#80d8ff',
strokeColor: '#0091ea'
});
polygons.push(polygon);
}
}
map.add(polygons)
map.setFitView(polygons);//视口自适应
});
}
document.getElementById('draw').onclick = drawBounds;
- 下属行政区查询
使用DistrictSearch逐级别依次搜索下级行政区的信息，并生成下拉列表。
var map, district, polygons = [], citycode;
var citySelect = document.getElementById('city');
var districtSelect = document.getElementById('district');
var areaSelect = document.getElementById('street');
map = new AMap.Map('container', {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
});
//行政区划查询
var opts = {
subdistrict: 1, //返回下一级行政区
showbiz:false //最后一级返回街道信息
};
district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
district.search('中国', function(status, result) {
if(status=='complete'){
getData(result.districtList[0]);
}
});
function getData(data,level) {
var bounds = data.boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
strokeColor: '#0091ea',
fillColor: '#80d8ff',
fillOpacity: 0.2,
path: bounds[i]
});
polygons.push(polygon);
}
map.setFitView();//地图自适应
}
//清空下一级别的下拉列表
if (level === 'province') {
citySelect.innerHTML = '';
districtSelect.innerHTML = '';
areaSelect.innerHTML = '';
} else if (level === 'city') {
districtSelect.innerHTML = '';
areaSelect.innerHTML = '';
} else if (level === 'district') {
areaSelect.innerHTML = '';
}
var subList = data.districtList;
if (subList) {
var contentSub = new Option('--请选择--');
var curlevel = subList[0].level;
var curList = document.querySelector('#' + curlevel);
curList.add(contentSub);
for (var i = 0, l = subList.length; i < l; i++) {
var name = subList[i].name;
var levelSub = subList[i].level;
var cityCode = subList[i].citycode;
contentSub = new Option(name);
contentSub.setAttribute("value", levelSub);
contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode;
curList.add(contentSub);
}
}
}
function search(obj) {
//清除地图上所有覆盖物
for (var i = 0, l = polygons.length; i < l; i++) {
polygons[i].setMap(null);
}
var option = obj[obj.options.selectedIndex];// options是所有选项的element集合
var keyword = option.text; //关键字
var adcode = option.adcode;
district.setLevel(option.value); //行政区级别
district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
district.search(adcode, function(status, result) {
if(status === 'complete'){
getData(result.districtList[0],obj.id);
}
});
}
function setCenter(obj){
map.setCenter(obj[obj.options.selectedIndex].center)
}
公交信息查询
- 使用
AMap.StationSearch和『站点关键字』进行公交站点查询
function stationSearch() {
var stationKeyWord = document.getElementById('stationKeyWord').value
if(!stationKeyWord) return
//实例化公交站点查询类
var station = new AMap.StationSearch({
pageIndex: 1, //页码
pageSize: 60, //单页显示结果条数
city: '010' //确定搜索城市
});
station.search(stationKeyWord, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
stationSearch_CallBack(result); // 处理获取到的信息 生成marker
} else {
document.getElementById('tip').innerHTML = JSON.stringify(result);
}
});
}
/*公交站点查询返回数据解析*/
function stationSearch_CallBack(searchResult) {
var stationArr = searchResult.stationInfo;
var searchNum = stationArr.length;
if (searchNum > 0) {
document.getElementById('tip').innerHTML = '查询结果：共' + searchNum + '个相关站点';
map.clearMap(); // 清楚所有的marker
for (var i = 0; i < searchNum; i++) {
var marker = new AMap.Marker({
icon:new AMap.Icon({
image:'https://a.amap.com/jsapi_demos/static/resource/img/pin.png',
size:new AMap.Size(32,32),
imageSize:new AMap.Size(32,32)
}),
offset:new AMap.Pixel(-16,-32),
position: stationArr[i].location,
map: map,
title: stationArr[i].name // 鼠标移入的文字站名提示
});
// 也可以自定义信息窗体
// marker.info = new AMap.InfoWindow({
// content: stationArr[i].name,
// offset: new AMap.Pixel(0, -30)
// });
// marker.on('mouseover', function(e) {
// e.target.info.open(map, e.target.getPosition())
// })
}
map.setFitView();
}
}
document.getElementById('search').onclick = stationSearch;
- 使用
AMap.LineSearch进行公交线路查询
/*
* 该示例主要流程分为三个步骤
* 1. 首先调用公交路线查询服务(lineSearch)
* 2. 根据返回结果解析，输出解析结果(lineSearch_Callback)
* 3. 在地图上绘制公交线路()
*/
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
});
var linesearch;
/*公交线路查询*/
function lineSearch() {
var busLineName = document.getElementById('BusLineName').value;
if(!busLineName) return;
//实例化公交线路查询类，只取回一条路线
if(!linesearch){
linesearch = new AMap.LineSearch({
pageIndex: 1,
city: '北京',
pageSize: 1,
extensions: 'all'
});
}
//搜索“536”相关公交线路
linesearch.search(busLineName, function(status, result) {
map.clearMap()
if (status === 'complete' && result.info === 'OK') {
lineSearch_Callback(result);
} else {
alert(result);
}
});
}
/*公交路线查询服务返回数据解析概况*/
function lineSearch_Callback(data) {
var lineArr = data.lineInfo;
var lineNum = data.lineInfo.length;
if (lineNum == 0) {
} else {
for (var i = 0; i < lineNum; i++) {
var pathArr = lineArr[i].path;
var stops = lineArr[i].via_stops;
var startPot = stops[0].location;
var endPot = stops[stops.length - 1].location;
if (i == 0) //作为示例，只绘制一条线路
drawbusLine(startPot, endPot, pathArr);
}
}
}
/*绘制路线*/
function drawbusLine(startPot, endPot, BusArr) {
//绘制起点，终点
new AMap.Marker({
map: map,
position: startPot, //基点位置
icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
zIndex: 10
});
new AMap.Marker({
map: map,
position: endPot, //基点位置
icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
zIndex: 10
});
//绘制乘车的路线
busPolyline = new AMap.Polyline({
map: map,
path: BusArr,
strokeColor: "#09f",//线颜色
strokeOpacity: 0.8,//线透明度
isOutline:true,
outlineColor:'white',
strokeWeight: 6//线宽
});
map.setFitView();
}
lineSearch();
document.getElementById('search').onclick = lineSearch;
定位
使用CitySearch.getLocalCity可根据IP进行城市级定位，获得用户当前所在城市信息，适用于PC端以及GPS信号不佳的场景。
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
//获取用户所在城市信息
function showCityInfo() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
//地图显示当前城市
map.setBounds(citybounds); // 指定当前地图显示范围，参数bounds为指定的范围。
}
} else {
document.getElementById('info').innerHTML = result.info;
}
});
}
showCityInfo();
Map实例初始化时，不设定center时，API 将根据用户 IP 自动匹配地图中心点到用户所在城市的中心。
// 初始化地图时，若center属性缺省，地图默认定位到用户所在城市的中心
var map = new AMap.Map('container', {
resizeEnable: true
});
document.getElementById('adcode').innerHTML='当前城市adcode：'+map.getAdcode()+'
'+
'当前中心点：'+map.getCenter()
使用Geolocation.getCurrentPosition获取当前位置，可用于依赖于于用户定位的场景。
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition:'RT', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位结果
function onComplete(data) {
document.getElementById('status').innerHTML='定位成功'
var str = [];
str.push('定位结果：' + data.position);
str.push('定位类别：' + data.location_type);
if(data.accuracy){
str.push('精度：' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('result').innerHTML = str.join('
');
}
通过给Geolocation设定相关属性，可以自定义定位按钮、定位点和精度圆的显示样式以及是否显示
var map = new AMap.Map('container', {
resizeEnable: true
});
var options = {
'showButton': true,//是否显示定位按钮
'buttonPosition': 'LB',//定位按钮的位置
/* LT LB RT RB */
'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
'showMarker': true,//是否显示定位点
'markerOptions':{//自定义定位点样式，同Marker的Options
'offset': new AMap.Pixel(-18, -36),
'content':'
'
},
'showCircle': true,//是否显示定位精度圈
'circleOptions': {//定位精度圈的样式
'strokeColor': '#0093FF',
'noSelect': true,
'strokeOpacity': 0.5,
'strokeWeight': 1,
'fillColor': '#02B0FF',
'fillOpacity': 0.25
}
}
AMap.plugin(["AMap.Geolocation"], function() {
var geolocation = new AMap.Geolocation(options);
map.addControl(geolocation);
geolocation.getCurrentPosition()
});
天气预报
使用Weather插件，获取指定地区的天气信息，可用于天气查询等场景。
AMap.plugin('AMap.Weather', function() {
var weather = new AMap.Weather();
//查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
weather.getLive('朝阳区', function(err, data) {
if (!err) {
var str = [];
str.push('实时天气' + '
');
str.push('城市/区：' + data.city + '
');
str.push('天气：' + data.weather + '
');
str.push('温度：' + data.temperature + '℃
');
str.push('风向：' + data.windDirection + '
');
str.push('风力：' + data.windPower + ' 级
');
str.push('空气湿度：' + data.humidity + '
');
str.push('发布时间：' + data.reportTime + '
');
var marker = new AMap.Marker({map: map, position: map.getCenter()});
// 可使用map.setCity(val);设置当前行政区
// 可使用DistrictSearch.search 获取行政区的信息
var infoWin = new AMap.InfoWindow({
content: ''+str.join('')+'',
isCustom:true,
offset: new AMap.Pixel(0, -37)
});
infoWin.open(map, marker.getPosition());
marker.on('mouseover', function() {
infoWin.open(map, marker.getPosition());
});
}
});
//未来4天天气预报
weather.getForecast('朝阳区', function(err, data) {
if (err) {return;}
var str = [];
for (var i = 0,dayWeather; i < data.forecasts.length; i++) {
dayWeather = data.forecasts[i];
str.push(dayWeather.date+' '+dayWeather.dayWeather+' '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
}
document.getElementById('forecast').innerHTML = str.join('
');
});
});