webapp-地图

webapp-地图

高德地图

• 个人第一个地图应用

  • 注册帐号并申请key
  • 准备页面
  • 建立地图应用

  var map = new AMap.Map("container", {
        zoom: 11,//级别
      }) 
  
      // console.log(map.getZoom())
      // console.log(map.getCenter().toString())
  
      map.on('moveend',function () {
        console.log(map.getZoom())
        console.log(map.getCenter().toString())
      })
  
    //  每次移动结束
      map.on('zoomend', function () {
          console.log(map.getZoom())
          console.log(map.getCenter().toString())
        })
    // 级别改变触发

  // 设置地图的层级
  
  btn.onclick = function () {
    map.setZoom(zoomVal.value)
  }

  zoom 的数字越大 显示的越精细 越小显示的范围越大 setZoom 手动设置级别

设置地图的中心点

// 设置地图的层级

btn.onclick = function () {
    map.setZoom(xNode.value,yNode.value)
}

既能设置zoom和center的方法

btn.onclick = function () {
    map.setZoomAndCenter(12,[121,20])
}

获取当前行政区

// 这是一个异步操做
map.getCity(function (info) {
    console.log(info)
})

设置当前行政区

btn.onclick = function() {
    map.setCity(cityNode.value)
}

设置当下的行政区，map.setCity('字符串') 想要到达的中心点

获取地图显示范围

console.log(map.getBounds)

获取 地图范围 .getBounds().northeast // 右上角坐标，.getBounds().northeast // 左下角坐标

设置地图显示范围

var myBounds = new AMap.Bounds([116,23],[123,52])
map.setBounds(myBounds)

不是特别精准

限制地图显示范围

var bounds = map.getBounds()
bounds.northeast.R = 118

map.setLimitBounds()
map.clearLimitBounds()

地图的平移

setInterval(() => {
    map.panBy(50,300*Math.random())
}, 3000);

setTimeout(() => {
    map.panTo([120,23])
}, 3000);

地图的平移， panBy(x,y) 和 panTo(x,y) x表明向左平移多少像素 / y表明向上平移多少像素

获取鼠标的经纬度

map.on('click',function (e) {
    console.log(e)
})

longitude 经度

latitude 纬度

map.on('click',function (e) {
    console.log(e.lnglat.lat, e.lnglat.lng)
})

获取鼠标的经纬度，利用事件对象

设置鼠标的样式

map.setDefaultCursor('pointer')

值选项：不少！

地图搜索

• 地图搜索

  输入提示

  AMap.plugin("AMap.Autocomplete",function() {
    new AMap.Autocomplete().search("要搜索的地点",function(status,data) {
        console.log(data) //搜索出来的数据
    }) 
  })

  在加载的key后面加上你想加上的插件！

  如下简洁写法

  new AMap.Autocomplete({
    input: 'searchText'
  })

• 添加标记

• 缩放比例尺控件

• 地图类型转换

如何知道地图加载完成？

AMap.plugin('AMap.Autocomplete',function () {
    new AMap.Autocomplete().search("北京",function(status,data) {
        console.log(data)
    })
})

POI

兴趣点

AMap.service(['AMap.PlaceSearch'],function() {
            new AMap.PlaceSearch({
                city:'0550', // 搜索城市
                map:map, // 地图对象
                panel:"setCenterNode" ,//在哪一个容器中显示
                pageSize: 5,//控制页数显示的条数
                pageIndex: 1, //默认显示的页数
                cityLimit: true, // 限定城市显示
            }).search('电影院') // 搜索关键词
        })

先添加一个服务，而后在函数里建立服务并配置参数！ 图片想要出来必须在服务器下！

var palceSearch = new AMap.PlaceSearch({
            map: map
        })
        
        AMap.event.addListener(search,'select', function(e)  {
            console.log(e)
            palceSearch.search(e.poi.name)
        }) // 给地图添加事件