地图容器 Container
图层 Layers
矢量图形 Vector Overlays
点标记 Markers  圆点标记 (CircleMarker) 、文本标记 (Text)、灵活点标记 (ElasticMarker) 海量点（MassMarks）、点聚合（MarkerCluster）
地图控件 Map Controls

插件 Plugins
地图级别 ZoomLevel
经纬度 LngLat
底图 BaseLayer
地图要素 Map Features
标注 Labels
地图平面像素坐标 Plane Coordinates
投影 Projection
三维空间坐标 3D Coordinates

基础类

//经纬度AMap.LngLat,lng经度，lat纬度
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 distance = lnglat1.distance(lnglat2);//计算lnglat1到lnglat2之间的实际距离(m)
var lnglat3 = lnglat1.offset(100,50)//lnglat1向东100m，向北50m的位置的经纬度
//像素点 AMap.Pixel
//像素尺寸 AMap.Size
//经纬度矩形边界 AMap.Bounds
//经纬度路径边界 AMap.ArrayBounds

地图生命周期：创建、存在、销毁

  • 创建一个地图
var map = new AMap.Map('container'); //container为地图容器的id
  • 创建时添加其他样式
var map = new AMap.Map('container', {
        zoom:11,//级别
        zooms: [4,18],//设置地图级别范围
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:'3D',//使用3D视图
        mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    	layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
    	lang:'zh_cn' //设置地图语言类型
});

  • 地图加载完成后触发complete

    map.on('complete', function(){
    // 地图图块加载完成后触发
});

  • 销毁地图对象

    // 销毁地图，并清空地图容器
map.destroy( );

  • 获取设置地图状态

    //中心点
var position = new AMap.LngLat(116, 39);
map.setCenter(position); //设置中心点
var currentCenter = map.getCenter(); //获取当前中心点

//地图缩放级别
map.setZoom(13)
map.getZoom

// 同时传入缩放级别和中心点经纬度
map.setZoomAndCenter(14, [116.205467, 39.907761]);

//地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内， 需要将地图调整到合适的缩放等级和中心点，可以调用setFitView()方法，以实现该效果。
// 无参数，默认包括所有覆盖物的情况
map.setFitView();
// 传入覆盖物数组，仅包括polyline和marker1的情况
map.setFitView([polyline,marker1])

    更多参数：http://lbs.amap.com/api/javascript-api/reference/map

覆盖物

  • 点标记Marker（灵活点标记ElasticMarker、文本标记Text、原点标记CircleMarker）
var marker = new AMap.Marker({
      icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",  //添加 Icon 图标 URL
      //position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象
      position:[116.39, 39.9]  //经纬度数组
})
map.add(marker);//添加到地图
map.remove(marker);//移除点标记

//一次添加多个
var markerList = [marker1, marker2, marker3];
map.add(markerList);

  • 点标记、矢量图形、信息窗体等，均可以使用add方法添加

  • 获取覆盖物

    //getAllOverlays(type)方法获取已经添加的覆盖物。其中type参数类型包括marker、circle、polyline、polygon，缺省是返回以上所有类型所有覆盖物
// 获取已经添加的覆盖物
map.getAllOverlays();
// 获取已经添加的marker
map.getAllOverlays('marker');

  • 移出覆盖物

    // 使用remove方法移除覆盖物，参数可以为单个覆盖物对象，也可以是一个包括多个覆盖物的数组
// 单独移除点标记
map.remove(marker);
// 同时移除点标记和矢量圆形
map.remove([marker,circle]);
// 使用clearMap方法删除所有覆盖物
map.clearMap();

  • JS API 提供的Map、点标记、矢量图形的实例均支持事件，鼠标或者触摸操作均会触发相应的事件。通过给点标记绑定click事件来简单了解事件系统和信息窗体的基本使用： 

var infoWindow = new AMap.InfoWindow({ //创建信息窗体
    isCustom: true,  //使用自定义窗体
    content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
    offset: new AMap.Pixel(16, -45)
});
var onMarkerClick  =  function(e) {
    infoWindow.open(map, e.target.getPosition());//打开信息窗体
    //e.target就是被点击的Marker
} 
var marker = new AMap.Marker({
    position: [116.481181, 39.989792]
})
map.add(marker);
marker.on('click',onMarkerClick);//绑定click事件

  • 自定义Icon

    // 创建 AMap.Icon 实例：
var icon = new AMap.Icon({
    size: new AMap.Size(40, 50),,    // 图标尺寸
    image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
    imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});

// 将 Icon 实例添加到 marker 上:
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.405467, 39.907761),
    offset: new AMap.Pixel(-10， -10),
    icon: icon, // 添加 Icon 实例
    title: '北京',
    zoom: 13
});

map.add(marker);

//向已创建好的 Marker 添加 Icon
//marker.setIcon(icon);

信息窗体InfoWindow

  • 默认信息窗体
// 信息窗体的内容
var content = [
    "<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
    "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
    "电话 : 010-84107000   邮编 : 100102",
    "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];

// 创建 infoWindow 实例	
var infoWindow = new AMap.InfoWindow({
   content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
});
	
// 打开信息窗体
infoWindow.open(map);

  • 自定义信息窗体

    // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
var content = [
    "<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
    "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
    "电话 : 010-84107000   邮编 : 100102",
    "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];

// 实现自定义窗体内容，返回拼接后的字符串
function createInfoWindow (title, content){
    // 内容拼接 ...
    return content;
}

// 创建 infoWindow 实例 
var infoWindow = new AMap.InfoWindow({
   isCustom: true,  //使用自定义窗体
   content: createInfoWindow(title,content.join("<br>")),  //传入 dom 对象，或者 html 字符串
   offset: new AMap.Pixel(16, -50)//偏移量 偏移量为（0,0）时自定义内容底部中心为基准点与经纬度坐标对齐
});

  • 信息窗体的打开与关闭

    // 在指定位置打开已创建的信息窗体
var position = new AMap.LngLat(116.39, 39.9);
infoWindow.open(map, position);
// 关闭信息窗体
infoWindow.close();

  • 信息窗体的事件

  • 高级信息窗体AdvancedInfoWindow

    封装了「输入提示、POI周边搜索、驾车路线规划、公交路线规划和步行路线规划」功能

    http://lbs.amap.com/api/javascript-api/reference/infowindow#AMap.AdvancedInfoWindow

  • 右键菜单ContextMenu

插件

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能 

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.7&key=您申请的key值"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('container',{
        zoom:12,
        center:[116.39,39.9]
    });
    AMap.plugin('AMap.ToolBar',function(){//异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });
</script>

//异步加载多个插件
AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
      var driving = new AMap.Driving();//驾车路线规划
      driving.search(/*参数*/)
});

事件绑定

  • Map或覆盖物对象的on、off方法

    var map = new AMap.Map("container");
var clickHandler = function(e) {
  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
};

// 绑定事件
map.on('click', clickHandler);
// 解绑事件
map.off('click', clickHandler);

  • MapsEvent 对象

    对于 Map、覆盖物、叠加层对象的鼠标、触屏绑定事件回调时，会返回 MapsEvent 对象。该对象包含触发的对象目标、触发所在经纬度等信息： 

    map.on('click', function(ev) {
  // 触发事件的对象
  var target = ev.target;
  
  // 触发事件的地理坐标，AMap.LngLat 类型
  var lnglat = ev.lnglat;
  
  // 触发事件的像素坐标，AMap.Pixel 类型
  var pixel = ev.pixel;
  
  // 触发事件类型
  var type = ev.type;
});

  • 地图事件

    地图加载完成  complete
地图缩放等级改变  zoomstart、zoomend
地图中心点移动  mapmove、movestart、moveend
地图容器尺寸改变  	resize
鼠标按下及移动等      click、
                    dblclick、
                    mousemove、
                    mouseover、
                    mouseout、
                    mouseup、
                    mousedown、
                    mousewheel、
                    rightclick
                    
触屏点击		touchstart、touchmove、touchend

  • 覆盖物事件

    Marker、Text 类对象发生移动   moving、moveend、movealong
矢量图形显示、隐藏	hide、show
ContextMenu 类对象打开关闭		open、close
鼠标按下及移动等	 click、
                    dblclick、
                    mousemove、
                    mouseover、
                    mouseout、
                    mouseup、
                    mousedown、
                    mousewheel、
                    rightclick

触屏点击	touchstart、 touchmove、 touchend

http://lbs.amap.com/api/javascript-api/guide/events/map_overlay

DOM事件，自定义事件

输入提示与POI搜索

  • 输入提示插件 AMap.Autocomplete
  • POI搜索插件AMap.PlaceSearch
笔记 GIS
GIS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！

Vim 上一篇
cookie/登录注册 下一篇