高德地图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的大小不一致，对于使用了组合图片的开发者来说，这种方式也是最合适的，可以通过增加p_w_picpathOffset属性来调整图片的显示区域：

  var icon = new AMap.Icon({            p_w_picpath : '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)

p_w_picpathOffset Pixel 图标取图偏移量。当p_w_picpath使用了图片精灵时，可通过size和p_w_picpathOffset配合，显示图标的指定范围

p_w_picpath  String 图标的取图地址。默认为蓝×××钉图片

p_w_picpathSize 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串，支持从服务器直接取数据