WebAPP开发与小程序之高德地图-1
我这边的内容安排是这样的，先讲一下地图的基本属性应用呀，地图功能的拓展呀，还有地图事件，地图控件作用啦~吧啦吧啦，应该会分为好几部分，一下子也说不完，那就慢慢来说吧！
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、 获取鼠标的经纬度
获取鼠标的经纬度
利用事件对象e e.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');
明天更 常用地图操作
等着你的到来
