高德地图API笔记
一、图层类 1
二、调用高德地图 2
三、点标注 2
3.1使用自定义maker标注 2
3.2 Icon参数详情 3
3.3在地图上画圆 3
四、区域搜索 4
4.1 画边界函数 5
五、高德地图服务插件 6
5.1地点搜素 7
六、 海量点 8
一、图层类
var layerName = new AMap.TileLayer.类名
layerName.setMap(map);
类名 说明
TileLayer 切片图层类
TileLayer.Satellite 卫星图层类，继承自TileLayer
TileLayer.RoadNet 路网图层类，继承自TileLayer
TileLayer.Traffic 实时交通图层类，继承自TileLayer
Buildings 3D楼块图层类
IndoorMap 室内地图图层类
ImageLayer 图片图层类
MassMarks 海量麻点图层类
例如MassMarks
var mass = new AMap.MassMarks({
anchor:new AMap.Pixel(5,5),
url: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
//必填参数，图标的地址
cursor:’pointer’,
size: new AMap.Size(5, 7),
})
mass.setMap(map)
mass.setData([]) // data: Array 坐标数据集. 例：data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]}
结合marker
marker = new AMap.Marker({
content:’’,
map:map
})
mass.on(“mouseover”,function(e){
marker.setPosition(e.data.lnglat);
marker.setLabel({content:e.data.name})
})
参考链接：http://lbs.amap.com/api/javascript-api/reference/layer/
二、调用高德地图
<style>
#container{
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<div id=”container”></div>
var map = new AMap.Map(‘container’,{
zoom:10,
center:[116,40]
});
三、点标注
marker = new AMap.Marker({ position: provinces[i].center.split(','), title: provinces[i].name, map: mapObj});
3.1使用自定义maker标注
var marker = new AMap.Marker({ icon : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px position : provinces[i].center.split(','), offset : new AMap.Pixel(-12,-12), map : map });
但通常我们使用Icon类来设置marker的icon，因为icon的大小通常和默认marker的大小不一致，对于使用了组合图片的开发者来说，这种方式也是最合适的，可以通过增加imageOffset属性来调整图片的显示区域：
var icon = new AMap.Icon({ image : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px //icon可缺省，缺省时为默认的蓝色水滴图标， size : new AMap.Size(24,24) }); var marker = new AMap.Marker({ icon : icon,//24px*24px position : provinces[i].center.split(','), offset : new AMap.Pixel(-12,-12), map : mapObj });
3.2 Icon参数详情
参数名称 类型 说明
size Size 图标尺寸，默认值(36,36)
imageOffset Pixel 图标取图偏移量。当image使用了图片精灵时，可通过size和imageOffset配合，显示图标的指定范围
image String 图标的取图地址。默认为蓝色图钉图片
imageSize Size 修改原始图片的大小，将拉伸或压缩图片，等同于CSS中的background-size 属性。可用于实现高清屏的高清效果
3.3在地图上画圆
var circle = new AMap.Circle({
map:map,
center:["116.418757","39.917544"], //圆的中心位置
radius:10000, //表示半径的为多少米
fillColor:"#ff0000", //填充颜色必须为16进制
})
参考：http://lbs.amap.com/api/javascript-api/reference/overlay/#Marker
四、区域搜索
AMap.service('AMap.DistrictSearch',function(){//回调函数
districtSearch = new AMap.DistrictSearch({
level:"country",
extensions:"all",
subdistrict:3
});
districtSearch.search('中国',function(status, result){
console.log(result)
})
})
返回结果
Object {info: "OK", districtList: Array[1]}
districtList:Array[1] //数组内有一个元素
0:Obejct //数组内的元素
boundaries: //边界
center:
citycode
name: "中华人民共和国"
districtList:Array[34] //34个区域，23个省、4个直辖市、2个特别行政区、5个自治区。
....
依次类推
District 对象
属性 类型 说明
name String 行政区名称
citycode String 城市编码
adcode String 区域编码
center LngLat 城市中心点
level String 行政区划级别
boundaries Array.<Array.<LngLat>> extensions为“all”时，行政区边界坐标集合 若行政区包含群岛，则坐标点为各岛的边界，岛间边界经纬度使用二维数组来表示
districtList Array.<District> 下级行政区信息列表 subdistrict 为0时，不返回该对象
返回结果中的center可以直接当做position来调用。
4.1 画边界函数
districtSearch.search('朝阳区', function(status, result){ var bounds = result.districtList[0].boundaries; var polygon = new AMap.Polygon({ map: map, strokeWeight: 1, path: bounds, fillOpacity: 0.7, fillColor: '#CCF3FF', strokeColor: '#CC66CC' }); map.setFitView();});
amapAdcode.addPolygon = function(boundaries) {//往地图上添加覆盖物
if (boundaries) {
for (var i = 0, l = boundaries.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
path: boundaries[i]
});
this._overlay.push(polygon);
}
map.setFitView();//地图自适应
}
};
for(var i=0;i<res.districtList[0].boundaries.length;i++){
polygon = new AMap.Polygon({
map:map,
path:res.districtList[0].boundaries[i],
fillOpacity:0,
strokeWidth:2px
})
}
五、高德地图服务插件
AMap.service(service:Array.<service>,callback:function)
服务加载方法，参数service可以为服务插件中的一个或多个
AMap.Autocomplete
输入提示，根据输入关键字提示匹配信息
AMap.ArrivalRange
公交到达圈，根据起点坐标，计算出在指定时间内能够到达的距离范围
AMap.CitySearch
城市查询，IP定位获取当前城市信息
AMap.DistrictSearch
行政区查询服务，提供行政区相关信息
AMap.Driving
驾车路线规划服务，提供起、终点坐标的驾车导航路线查询功能
AMap.Geocoder
地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
AMap.LineSearch
公交路线服务，提供公交路线相关信息查询服务
AMap.PlaceSearch
地点搜索服务插件，提供某一特定地区的位置查询服务
AMap.RoadInfoSearch
道路及道路交叉口查询服务
AMap.StationSearch
公交站点查询服务，提供途经公交线路、站点经纬度等信息
AMap.Transfer
公交换乘服务，提供起、终点公交路线规划服务，整合步行方式
AMap.Walking
步行导航服务，提供起、终点步行路线规划服务
AMap.Weather
天气查询服务，提供城市/区县天气预报服务
http://lbs.amap.com/api/javascript-api/reference/search_plugin/#m_AMap.PlaceSearch
PlaceSearch 说明。
res.districtList[0].districtList[0].districtList[0].districtList[0]
5.1地点搜素
AMap.service(["AMap.PlaceSearch"], function() {
placeSearch = new AMap.PlaceSearch({ //构造地点查询类
type:'医疗保健服务',
pageSize:30,
city: "010" //城市
});
//关键字查询
placeSearch.search('', function(status, result) {
if (status === 'complete' && result.info === 'OK') {
res = result;
console.log(result)
}
});
});
缺陷，一页只能显示30个点。
六、海量点
MassMarks 类
此类表示海量点类，利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器。
AMap.MassMarks(data:Array.<Object>,opts:MassMarksOptions)
MassMarksOptions 类型 说明
zIndex Number 图层叠加的顺序值，0表示最底层。默认zIndex：5
opacity Float 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
zooms Array 支持的缩放级别范围，默认范围[3-18]，在PC上，取值范围为[3-18]；在移动设备上，取值范围为[3-19]
anchor Pixel 必填参数，图标显示位置偏移量，以图标的左上角为基准点（0,0）点，例如：anchor:new AMap.Pixel(5,5)
url String 必填参数,图标的地址
size Size 必填参数，图标的尺寸；例如：size:new AMap.Size(11,11)
cursor String 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
alwaysRender Boolean 表示是否在拖拽缩放过程中实时重绘，默认true，建议超过10000的时候设置false
data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …]或url串，支持从服务器直接取数据