温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

高德地图API笔记

发布时间:2020-06-06 16:55:11 来源:网络 阅读:12756 作者:艾贺 栏目:web开发

一、图层类 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类来设置markericon,因为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使用了图片精灵时,可通过sizep_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进制

})

高德地图API笔记 

参考: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个自治区。

....

 

依次类推

高德地图API笔记高德地图API笔记 

 

高德地图API笔记 

 

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 说明。

高德地图API笔记 

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表示最底层。默认zIndex5

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 指定鼠标悬停时的鼠标样式,自定义cursorIE仅支持cur/ani/ico格式,Opera不支持自定义cursor

alwaysRender Boolean  表示是否在拖拽缩放过程中实时重绘,默认true,建议超过10000的时候设置false

 

 

data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …]url串,支持从服务器直接取数据


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI