开发 地图 JS API 1.4 教程 入门 基础类

基础类 最后更新时间: 2024年01月24日

使用 JS API 开发之前有几个基础类型需要了解一下,包括:

  1. 经纬度 AMap.LngLat
  2. 像素点 AMap.Pixel
  3. 像素尺寸 AMap.Size
  4. 经纬度矩形边界 AMap.Bounds
  5. 经纬度路径边界 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.Map('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

像素点由xy两个分量组成,通常用来描述地图的容器坐标、地理像素坐标 (平面像素坐标)、点标记和信息窗体的的锚点等。使用方式如下:

  var offset  = new AMap.Pixel(-16,-30);
  var marker = new AMap.Marker({
      offset:offset,
      icon:'xxx.png',
  });
  map.add(marker);

查看详细接口说明

像素尺寸 AMap.Size

像素尺寸由widthheight两个分量构成,通常用来描述具有一定大小的对象,比如地图的尺寸,图标的尺寸等

  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: "http://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))//判断点是否在边界内
  


返回顶部 示例中心 常见问题 智能客服 公众号
二维码