我这边的内容安排是这样的，先讲一下地图的基本属性应用呀，地图功能的拓展呀，还有地图事件，地图控件作用啦~吧啦吧啦，应该会分为好几部分，一下子也说不完，那就慢慢来说吧！
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Are you ready ??
第一章? ? 地图应用
首先我们先去官网注册账号并申请key，假如我们没有这个key，地图有些功能会受到限制，所以为了能后期使用到所有功能，就申请key，那么怎样申请key呢？先去百度，搜索高德地图官网，进入高德开放平台页面，而后找到开发文档，如下图
点击JS API
点击准备，而后按照三个步骤进行注册，选择个人开发者，注册完成后，最后在创立应用后得到一个key值，如下图
注册完成后，在官网中准备页面中提醒将那里的值替换成我们申请的key值，而后为地图增加容器，再new 一个对象，告诉对象容器是哪个，直接进入小栗子了~
同步方式
异步方式
动态生成第二章? ?地图的属性应用
1、获取地图的中心点/级别
?初始化地图的中心点/级别
????????new AMap.Map('container',{
????????????zoom:10,? // zoom设置初始的地图级别为10
????????????center:[120,30]? ? ? // center 初始化地图的中心点
????????});
那怎样样才能获取它呢？只要要var一个变量
? ? ? ? var map = new AMap.Map('container',{
????????????zoom:10,??
????????????center:[120,30]? ??
????????});
? ? ? ? console.log(map.getZoom());
? ??????console.log(map.getCenter());
那假如当我们在地图中移动后想知道当前点的中心点怎样办呢？如下：
????????map.on('moveend',function(){
? ??????????console.log(map.getZoom());
? ??????????console.log(map.getCenter());
????????});
当我们双击地图的时候级别也会变，会用到zoomend(当级别发生改变的时候触发的事件)
????????map.on('zoomend',function(){
????????????console.log(map.getZoom());
? ??????????console.log(map.getCenter());
????????});
2、 设置地图的 中心点 / 级别（手动设置）
? ? (1)用定时器设置地图 中心点 / 级别，查看效果
? ??setTimeout(function(){
????????map.setCenter([120,30]);
????},5000);//等5秒后地图中心点改变
????setTimeout(function(){
????????map.setZoom(15);
????},5000);//等5秒后地图级别改变
? ??(2) 通过事件来给它设置 中心点 / 级别
? ??<div id="setCenterNode">
????????<input type="text" id="xNode">
????????<input type="text" id="yNode">
????????<button id="btn1">确定</button>
????</div>
????<div id="setZoomNode">
????????<input type="text" id="zoomVal">
????????<button id="btn2">确定</button>
????</div>
? ??btn1.onclick = function(){
????????map.setCenter([xNode.value,yNode.value]);
????};
????btn2.onclick = function(){
????????map.setZoom(zoomVal.value);
????};
? ? (3)?通过事件来一起给它 层级 和 中心点
????<div id="setCenterNode">
????????<input type="text" id="xNode">
????????<input type="text" id="yNode">
????????<input type="text" id="zoomVal">
????????<button id="btn">确定</button>
????</div>
????btn.onclick = function(){
????????map.setZoomAndCenter(zoomVal.value,[xNode.value,yNode.value]);
????};
zoom的数字越大，显示的越精细，越小显示的范围越大。
通过setZoom可以手动设置它的级别。
setCenter([]) 放入坐标 。
通过setZoomAndCenter(zoom,[])设置级别和中心点。
3、? 获取地图的当前的行政区
那么，行政区是什么呢？举个栗子来说，北京，有大兴区、朝阳区、丰台区，emmm....那我们来获取吧！
// 获取当前位置的行政区
????map.getCity(function(info){
? ? ? ? console.log(info);
????});
// 获取 当鼠标移动暂停后位置 的行政区
? ??map.on('moveend',function() {
????????map.getCity(function(info){
? ? ? ? ? ? // console.log(info);
? ? ? ? ? ? setCenterNode.innerHTML = info.province + ',' +?info.district; //?当地图移动暂停后，获取地图的地图级别及中心点
????????});
????});
4、? 设置地图的当前的行政区
????// 设置当前行政区
????map.setCity('郑州市');
? ??// 通过按钮事件来给地图设置当前位置的行政区
? ??<div id="setCenterNode">
????????<input type="text" id="cityNode">
????????<button id="btn">确定</button>
????</div>
????btn.onclick = function(){
????????map.setCity(cityNode.value);
????};
获取行政区：? getCity(function(info){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?info 指的是当前位置的行政区
? ? ? ? ? ? ? ? ? ? ? ? });
设置行政区：? setCity('字符串') 想让地图到达该地区的中心点
5、? 设置/获取地图的显示范围
? ? a.? ? 获取地图的显示范围
? ? console.log(map.getBounds());
? ? // 获取地图的右上角坐标
? ? console.log(map.,getBounds().northeast.toString());
????console.log(map.,getBounds().southwest.toString());
? ??<div id="setCenterNode">
????????<div>地图右上角坐标:<span id="ne"></span></div>
????????<div>地图左下角坐标:<span id="sw"></span></div>
????</div>
? ? ne.innerHTML =?map.,getBounds().northeast.toString();
? ? sw.innerHTML =?map.,getBounds().southwest.toString();
? ? // 当地图移动暂停的时候，获取地图的地图级别及中心点
????map.on('moveend',function() {
????????// 地图的右上角的坐标
????????ne.innerHTML = map.getBounds().northeast.toString();
????????// 地图的左下角的坐标
????????sw.innerHTML = map.getBounds().southwest.toString();
????});
? ? b.? ?设置地图的显示范围
? ??var myBounds = new AMap.Bounds([113.769022,34.895938],[115.769022,40.895938]);
????map.setBounds(myBounds);
获取地图范围
getBounds().northeast.toString()? ? ? 获取右上角的坐标getBounds().southeast.toString()? ? ? 获取左下角的坐标
设置地图的显示范围
var 变量 = new AMap.Bounds(左下角坐标的数组,右上角坐标的数组)
map.setBounds(变量)? ? ? ? ? 但不是那么精准，会以它觉得最好的方式显示
6、? 限制地图的显示范围
? ??var bounds = map.getBounds();
? ? map.setLimitBounds(bounds);
? ?// 清理设定的显示范围
? ? map.clearLimitBounds();
?7、 地图的平移
地图的平移
panBy(x,y)? ? ? ? ? ? x代表向左平移的像素，y代表向上平移的像素panTo([x坐标,y坐标])? ? ? ? 地图会直接平移到这个位置
8、 获取鼠标的经纬度
获取鼠标的经纬度
利用事件对象ee.lnglat.lng/e.lnglat.lat
例如：
lng--> longitude? ?经度
lat--> latitude? ? ? 纬度
map.on('click',function(e){
????//鼠标一点击，就到中心点的位置 ????map.setCenter([e.lnglat.lng,e.lnglat.lat]);
});
9、设置鼠标的样式
设置地图的鼠标默认样式
setDefaultCursor('样式');? ? ? // 样式可以是cursor里面的所有样式
例如：
map.setDefaultCursor('pointer');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?明天更? 常用地图操作
等着你的到来