一、图层类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串,支持从服务器直接取数据