高德地图API笔记
一、图层类1
二、调用高德地图2
三、点标注2
3.1使用自定义maker标注2
3.2Icon参数详情3
3.3在地图上画圆3
四、区域搜索4
4.1画边界函数5
五、高德地图服务插件6
5.1地点搜素7
六、海量点8
一、图层类varlayerName=newAMap.TileLayer.类名
layerName.setMap(map);
类名说明
TileLayer切片图层类
TileLayer.Satellite卫星图层类,继承自TileLayer
TileLayer.RoadNet路网图层类,继承自TileLayer
TileLayer.Traffic实时交通图层类,继承自TileLayer
Buildings3D楼块图层类
IndoorMap室内地图图层类
ImageLayer图片图层类
MassMarks海量麻点图层类
例如MassMarks
varmass=newAMap.MassMarks({
anchor:newAMap.Pixel(5,5),
url:'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
//必填参数,图标的地址
cursor:’pointer’,
size:newAMap.Size(5,7),
})
mass.setMap(map)
mass.setData([])//data:Array坐标数据集.例:data:[{lnglat:[116.405285,39.904989],name:i,id:1},{},…],{},…]}
结合marker
marker=newAMap.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>
<scripttype="text/javascript"src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<divid=”container”></div>
varmap=newAMap.Map(‘container’,{
zoom:10,
center:[116,40]
});
三、点标注marker=newAMap.Marker({position:provinces[i].center.split(','),title:provinces[i].name,map:mapObj});
3.1使用自定义maker标注varmarker=newAMap.Marker({icon:'http://vdata.amap.com/icons/b18/1/2.png',//24px*24pxposition:provinces[i].center.split(','),offset:newAMap.Pixel(-12,-12),map:map});
但通常我们使用Icon类来设置marker的icon,因为icon的大小通常和默认marker的大小不一致,对于使用了组合图片的开发者来说,这种方式也是最合适的,可以通过增加p_w_picpathOffset属性来调整图片的显示区域:
varicon=newAMap.Icon({p_w_picpath:'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px//icon可缺省,缺省时为默认的蓝色水滴图标,size:newAMap.Size(24,24)});varmarker=newAMap.Marker({icon:icon,//24px*24pxposition:provinces[i].center.split(','),offset:newAMap.Pixel(-12,-12),map:mapObj});
3.2Icon参数详情参数名称类型说明
sizeSize图标尺寸,默认值(36,36)
p_w_picpathOffsetPixel图标取图偏移量。当p_w_picpath使用了图片精灵时,可通过size和p_w_picpathOffset配合,显示图标的指定范围
p_w_picpathString图标的取图地址。默认为蓝×××钉图片
p_w_picpathSizeSize修改原始图片的大小,将拉伸或压缩图片,等同于CSS中的background-size属性。可用于实现高清屏的高清效果
3.3在地图上画圆varcircle=newAMap.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=newAMap.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对象
属性类型说明
nameString行政区名称
citycodeString城市编码
adcodeString区域编码
centerLngLat城市中心点
levelString行政区划级别
boundariesArray.<Array.<LngLat>>extensions为“all”时,行政区边界坐标集合若行政区包含群岛,则坐标点为各岛的边界,岛间边界经纬度使用二维数组来表示
districtListArray.<District>下级行政区信息列表subdistrict为0时,不返回该对象
返回结果中的center可以直接当做position来调用。
4.1画边界函数districtSearch.search('朝阳区',function(status,result){varbounds=result.districtList[0].boundaries;varpolygon=newAMap.Polygon({map:map,strokeWeight:1,path:bounds,fillOpacity:0.7,fillColor:'#CCF3FF',strokeColor:'#CC66CC'});map.setFitView();});
amapAdcode.addPolygon=function(boundaries){//往地图上添加覆盖物
if(boundaries){
for(vari=0,l=boundaries.length;i<l;i++){
//生成行政区划polygon
varpolygon=newAMap.Polygon({
map:map,
path:boundaries[i]
});
this._overlay.push(polygon);
}
map.setFitView();//地图自适应
}
};
for(vari=0;i<res.districtList[0].boundaries.length;i++){
polygon=newAMap.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=newAMap.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类型说明
zIndexNumber图层叠加的顺序值,0表示最底层。默认zIndex:5
opacityFloat图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
zoomsArray支持的缩放级别范围,默认范围[3-18],在PC上,取值范围为[3-18];在移动设备上,取值范围为[3-19]
anchorPixel必填参数,图标显示位置偏移量,以图标的左上角为基准点(0,0)点,例如:anchor:newAMap.Pixel(5,5)
urlString必填参数,图标的地址
sizeSize必填参数,图标的尺寸;例如:size:newAMap.Size(11,11)
cursorString指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor
alwaysRenderBoolean表示是否在拖拽缩放过程中实时重绘,默认true,建议超过10000的时候设置false
data:[{lnglat:[116.405285,39.904989],name:i,id:1},{},…]或url串,支持从服务器直接取数据
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。