简介

轻捷易用，功能按需加载，丰富的可视化效果，兼容各种浏览器(pc ,移动)

第一个地图应用

1.注册账号，申请key lbs.amap.com/api/javascr…

2.三种方式

(1)
  <script src='amap.com/maps?v=1.4&key=xx' />
  <script>
     new AMap.Map(domId)
  </script>
(2) 指定 callback
  <script>
    window.init=()=>{
       new AMap.Map(domId)
    }
  </script>
  <script src='amap.com/maps?v=1.4&key=xx&callback=init' />
(3)
  <script src='amap.com/maps?v=1.4&key=xx' />
  window.onload=()=>{
     new AMap.Map(domId)
  }

地图的属性

map=new AMap.Map(domId,{
    zoom,// 级别, 数字越小，显示范围越大，越不精细
    center:[x,y],//中心经纬度
    resizeEnable //是否可以更改大小
  })

实例方法

map.getZoom() , setZoom()  //级别
map.getCenter(), setCenter() // 中心（初始，拖动会改变）
setZoomAndCenter()

map.getCity(function(info){}) //获取行政区（根据中心来获取，）
map.setCity('') //设置行政区为中心，根据行政区来找 center，进行设置地图中心

map.getBounds()  //获取地图的显示范围 {northeast,southwest} //左上角，右下角
map.setBounds(new AMap.Bounds([左下角，右上角]))// 只是尽量拉伸，会更改 center 和级别

map.setLimitBounds() //限制地图的显示范围(一拖动到超出区域，会立马弹回到限制区域内)
map.clearLimitBounds()

map.panBy(左距离，上距离)//地图的平移（除了鼠标拖动操作）
map.panTo(坐标)

map.setDefaultCursor('pointer') //设置鼠标样式

事件

map.on('',callback)
  事件：moveend, zoomend , click
map.on('click',e=>{})//获取鼠标的经纬度,e 中有鼠标经纬度

加载插件

方式1：
AMap.plugin('AMap.Autocomplete',function(){
  new AMap.Autocomplete().search('北京',function(status,data){ //搜索北京相关的
  
  })
})//地图加载完毕会触发的插件
方式2：
<script src='amap.com/maps?v=1.4&key=xx&callback=init&plugin=AMap.Autocomplete,AMap.PlaceSearch' />

地图常用操作

地图搜索

AMap.Autocomplete().search() //自己写搜索 list，绑事件
new AMap.Autocomplete({
  input:'输入框 id' //指定输入框 id，插件自动生成好 list 搜索功能,但点击某项并不能到指定位置为中心
})

地图搜索与 POI 结合

poi: point of interest 兴趣点

案例1

// 页面地址不能通过 file 协议访问，否则图片出不来
AMap.service(['AMap.PlaceSearch'],function(){
   ipt.onclick=function(){
        new AMap.PlaceSearch({
          panel:domId, //搜索（兴趣结果 list）放在哪个元素下，点击某项会调到指定位置为中心的点
          map:map,//放在哪个元素里
          city:区号,// 在哪个城市搜索
          cityLimit:true,//是否限定在指定城市搜索
          pageSize，
          pageIndex,
          type:'餐饮'
        }).search(ipt.value) //会显示搜索兴趣点列表 list
        # .searchNearBy('北京',中心点，方圆距离，function(){}) //搜索中心点方圆多少内的兴趣点
   }

案例2

var map=new AMap.Map(id,{})
var searchNode=new AMap.Autocomplete({ //**会自动弹出搜索 list（区别与兴趣结果 list）**
    input:'searchIpt'
})
var placeSearch=new AMap.PlaceSearch({
    map:map
})
// 给地图元素加事件， 一搜索，点击搜索下面的列表项，地图就会自动到对应的中心点
AMap.event.addListener(searchNode,'select',function(e){ //点击搜索 list某项，
    placeSearch.search(e.poi.name) //地图跳到对应的地方，兴趣点自动标注出来
})

添加标记

marker = new AMap.Marker({
    icon,
    postion,// 坐标
    offset:new AMap.Pixel(-50,-50) //偏差
})
marker.setMap(map)
或者 map.add([marker])

自定义点标记图标

 icon = new AMap.Icon({
    size:new AMap.size(500,500),
    image:'',
    imageSize:new AMap.Size() //地图中显示的大小
    imageOffset:new AMap.Pixel() //裁剪偏差值
})
// 文字
text=new AMap.text({
    text,
    postion
})
text.setMap()

删除标记

marker.setMap(null)
map.remove([marker])

缩放比例尺控件

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.Scale,AMap.Toolbar' />
map.addControl(new AMap.Scale()) //比例尺
map.addControl(new AMap.Toolbar()) // 缩放平移工具条

2d-3d 转换

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.Scale,AMap.ControlBar' />
new AMap.Map({
    viewMode:'3D',// 3d 地图
    pitch:90 ,//倾斜角度
    buildingAnimation:true,//建筑生成动画
})
map.add(new AMap.ControlBar({
    showZoomBar, //是否显示级别跳转工具条
    showControlButton, //是否显示旋转工具，否显示指南针
    position:{ // control 的页面定位
        left,
        right,
    }
}))

路线指定

驾车路线

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.Driving' />
driving= new AMap.Driving({
    map,
    panel, //详细信息（包括行程时间，转弯之类）在哪个元素显示
   
})
driving.search([
    {keyword:'北京南站',city:'北京'}
    {keyword:'北京西站',city:'北京'}
]，function(status,data){})

driving.search(new AMap.LngLat(x,y),new AMap.LngLat(x,y),function(){}) //坐标

步行路线

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.Walking' />
walking=new AMap.Walking({map,panel}) 
walking.search([
    {keyword:'北京南站',city:'北京'}
    {keyword:'北京西站',city:'北京'}
]，function(status,data){})
walking.search([x,y],[x,y],function(){}) //两个点
walking.search([坐标点1，坐标点2，坐标点3]) //多个点

货车路线

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.TrunkDriving' />
trunkDriving=new AMap.TrunkDriving({
    map,
    panel,
    city,
    size
})
trunkDriving.search([
    {lnglat,lnglat:[x,y]},
    {lnglat,lnglat}
],function(){})

trunkDriving.search([
  {keyword,city},
  {keyword,city}, //支持中转
  {keyword,city},
])

骑行路线

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.Riding' />
riding=new AMap.Riding({
    map,
    panel
})
riding.search([
    {keyword,city}
    {keyword,city}
])
riding.search(new AMap.LngLat(x,y),new AMap.LngLat(x,y),function(){})
riding.search([x,y],[x,y],function(){}) //没有[坐标1，坐标2，坐标3]

公交(地铁)路线

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.Transfer' />
transfer=new AMap.Transfer({
    map,
    panel,
    city //一定要加 city
})
transfer.search([
    {keyword,city} //不支持途经
    {keyword,city}
])
transfer.search([x,y],[x,y])
transfer.search(new AMap.LngLat(x,y),new AMap.LngLat(x,y),function(){})

控件

地图类型

<script src='amap.com/maps?v=1.4&key=xx&plugin=AMap.MypeType' />
mypeType= new AMap.MypeType({
   default:0//0默认，1卫星
   showRoad //显示路况
   visible， //是否显示
})
map.addControl(mypeType)

其他控件

AMap.OverView 鹰眼插件 //下面缩小窗
AMap.Scale
AMap.ToolBar

控件添加和删除

control.hide() | control.show() //显示隐藏

事件系统

map.on(event,function)

地图内部状态改变时触发

complete //地图图块加载完后触发，这时可以获取地图的各种状态（中心点，缩放等级）
zoomstart| zoomend //地图缩放登记变化时触发 ,setZoom  zoomIn zoomOut触发
mapmove | movestart | moveend 平移触发，setenter,panTo,panBy 也可触发
resize 地图容器大小改变后触发，浏览器窗口改变，或 dom 容器改变，需要 Map.resizeEnable 开启时该事件才正确触发

覆盖物状态改变触发的事件

Marker,Text 类对象

 text.on('mouseover',function) //鼠标移入覆盖物
 text.on('mouseout',function)
 text.on('mousemove',function)

矢量图形显示，隐藏

  hide,show ,矢量图调用 hide(),show()触发
  // Circle,Rectangle
  circle=new AMap.Circle({
      center,
      radius
  })
  circle.setMap(map)

ContextMenu 类对象打开关闭

  open,close, ContextMenu 类对象调用 open(),close()触发
  
  contextmenu=new AMap.ContextMenu() //右键菜单
  contextmenu.addItem('放大一级',function(){
      map.zoomIn()
  })
  map.on('rightclick',function(e){
      contextmenu.open(map,e.lnglat) //在指定坐标点显示内容菜单 open 显示
      contextmenu.close() //隐藏菜单
  })

dom 事件

listen1 = AMap.event.addDomListener(dom,event,fn) //绑定方法
AMap.event,removeListener(listen1) //解绑方法

自定义事件

AMap.event.addListener 或 地图对象的 on
  map.on('count',fn)
触发：地图对象的 emit 方法派发
  map.emit('count',params)