高德地图相关总结

1. 申请key
2. script地址
3. 创建容器并命名id值
4. 创建地图 new AMap.Map('id')

//移动端：
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

map.getZoom()//获取地图级别Zoom 的数字越大 显示的越精细 越小显示的范围越大
map.setZoom()//设置地图级别

map.getCenter()//获取地图的中心点
map.setCenter([])//设置地图的中心点 放入 坐标

map.setZoomAndCenter(z,[x,y])//设置地图的层级以及中心点

map.getCity(callback(info))//获取行政区---info
map.setCity(str)//设置取行政区---

on('moveend')//地图移动结束时触发
on('zoomend')//地图级别发生改变时触发

获取地图的范围

map.getBounds().northeast//右上角坐标----json对象   toString（）
map.getBounds().southwest//左下角坐标

设置地图的范围

//首先需要生成一个Bounds对象
var myBounds = new AMap.Bounds(左下角坐标,右上角坐标);
map.setBounds(myBounds)

限制/取消限制地图的显示范围

var myBounds = new AMap.Bounds(左下角坐标的数组，右上角坐标的数组标);
map.setLimitBounds(myBounds)//但是不是特别精准，会以它觉得最好的方式去显示

取消地图范围限制

map.clearLimitBounds()
//可以通过对myBounds  对象内部的northeast southwest.p/r 赋值来更改范围，必须为Number类型；

地图的平移

panBy(x,y)  x代表向左平移多少像素  / y代表向上平移多少像素
panTo([x坐标，y坐标]) 地图会直接平移到这个位置

获取鼠标的经纬度

利用事件对象

e.lnglat.lng / lat 

设置地图鼠标的默认样式

setDefaultCursor('样式')
cursor : 里面所有的样式都可以

地图搜索

//加载插件 AMap.Autocomplete  地图加载完毕触发回调函数
AMap.plugin('AMap.Autocomplete',function(){
   
	
	new AMap.Autocomplete().search(要搜索的内容,function(status,data){
   
		console.log(data 搜索出来的数据)
	})
})

示例：(个人)

inputSearch.oninput=function(){
   
   ulNode.html = '';
    AMap.plugin('AMap.Autocomplete', function () {
   
     new AMap.Autocomplete()
     .search(inputSearch.value, function (status, data) {
   
         console.log(data)
         if (data.tips.length === 0) return;
         for (var i = 0; i < data.tips.length; i++) {
   
             var liNode = document.createElement('li');
             liNode.innerHTML = data.tips[i].name;
             liNode.q = data.tips[i].location.Q;
             liNode.r = data.tips[i].location.R;
             ulNode.appendChild(liNode);
             liNode.onclick = function () {
   
                 map.setCenter([this.r, this.q]);
                 inputSearch.value = this.innerHTML;
             }
         }
     })
  })
 }

加载插件的方式 二

https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e&plugin=AMap.Autocomplete

new AMap.Autocomplete({
   
    input:'searchText'//input searchText 《-》 id名
});

POI 缩写

Point of Interest
兴趣点

AMap.service(['AMap.PlaceSearch'],function(){
   
	new AMap