使用高德 JS API 开发之前有几个基础类型需要了解一下,包括:
- 经纬度 AMap.LngLat
- 像素点 AMap.Pixel
- 像素尺寸 AMap.Size
- 经纬度矩形边界 AMap.Bounds
- 经纬度路径边界 AMap.ArrayBounds
经纬度 AMap.LngLat
经纬度是利用三维球面空间来描述地球上一个位置的坐标系统,每个经纬度坐标由经度 lng
和纬度 lat
两个分量组成。在 JS API 里使用经纬度来表示地图的中心点center
、点标记的位置position
、圆的中心点center
、折线和多边形的路径path
等,以及其他所有表述实际位置的地方。
格式
经纬度的有效范围为经度-180
度到+180
度,纬度大约-85
度到+85
度。
JS API 支持的经纬度的写法有两种,使用时经度在前,纬度在后
,推荐使用标准写法:
var position = new AMap.LngLat(116, 39);//标准写法
var position = [116, 39]; //简写
var map = new AMap.Center('conatiner',{
center:position
})
对于使用到经纬度数组的时候,比如创建一个折线的路径,写法如下:
var path = [new AMap.LngLat(116,39), new AMap.LngLat(116,40), new AMap.LngLat(117,39)] //标准写法
var path = [ [116,39], [116,40], [117,39] ]; //简写
var polyline = new AMap.Polyline({
path : path,
})
map.add(polyline);
目前不支持如下写法:
var position = '116,39'
var position = ['116','39']
var path = [ '116,39', '117,39', '116,40']
计算
使用经纬度类型可以进行一些简单的位置计算,比如点与点、点与线的距离,根据距离差计算另一个经纬度等:
var lnglat1 = new AMap.LngLat(116, 39);
var lnglat2 = new AMap.LngLat(117, 39);
var distance = lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)
var lnglat3 = lnglat1.offset(100,50)//lnglat1向东100m,向北50m的位置的经纬度
特别说明:
高德地图采用 GCJ-02 坐标系,即火星坐标系。与 GPS 坐标系,即 WGS-84 坐标系存在一定的偏移量,如果您采集到的坐标数据为GPS坐标,可以先通过AMap.ConvertFrom
进行坐标偏移后进行制图或者使用,才能够和高德的底图完全匹配。
像素点 AMap.Pixel
像素点由x
和y
两个分量组成,通常用来描述地图的容器坐标、地理像素坐标 (平面像素坐标)、点标记和信息窗体的的锚点等。使用方式如下:
var offset = new AMap.Pixel(-16,-30);
var marker = new AMap.Marker({
offset:offset,
icon:'xxx.png',
});
map.add(marker);
像素尺寸 AMap.Size
像素尺寸由width
和height
两个分量构成,通常用来描述具有一定大小的对象,比如地图的尺寸,图标的尺寸等
var mapSize = map.getSize();//获取地图大小,返回的是地图容器的像素大小
var width = mapSize.width;
var height = mapSize.height;
var marker = new AMap.Marker({
position: [116.405467, 39.907761],
icon: new AMap.Icon({
size: new AMap.Size(40, 50), //图标的大小
image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
imageOffset: new AMap.Pixel(0, -60)
})
});
map.add(marker)
经纬度矩形边界 AMap.Bounds
经纬度矩形边界为一个矩形的经纬度范围,用西南角和东北角的两个经纬度来描述,这两个经纬度分别代表边界的最小值和最大值。矩形经纬度边界通常用来描述:地图的当前边界、覆盖物的外包矩形边界、图片图层的覆盖范围等。比如构造一个新的Bounds对象来调成地图的边界范围:
var southWest = new AMap.LngLat(110,20);
var northEast = new AMap.LngLat(120,30);
var bounds = new AMap.Bounds(southWest, northEast);
map.setBounds(bounds);
经纬度路径边界 AMap.ArrayBounds
3D视图下,由于地图的倾斜和旋转,由于地图边界已经不在是矩形边界,我们提供了ArrayBounds
来描述地图当前视口的边界范围,它使用一组经纬度路径来表述一个闭合的区域边界。ArrayBounds
提供了contains
方法可用来判断经纬度点是否在其内部。
var map = new AMap.Map('container',{
zoom:17,
viewMode:'3D'
})
var arrayBounds = map.getBounds();
var path = arrayBounds.bounds//经纬度的路径
var isPointInBounds = arrayBounds.contains(new AMap.LngLat(116, 39))//判断点是否在边界内