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)
		}) // 给地图添加事件