02、高德地图

准备

1、登陆注册申请key值：

https://lbs.amap.com/api/webservice/guide/create-project/get-key

2、进入控制台应用管理，创建应用，添加key：

https://lbs.amap.com/dev/key/app

3、帮助文档：

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

创建地图

同步方式创建地图

//引入地图js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e"></script> 

//给地图的容器设置宽高
<style type="text/css">
#container{width: 100%;height: 600px;}
</style>

//需要引入地图的容器

<div id="container"></div>

//创建地图，并把地图引入id为container的容器
<script type="text/javascript">
new AMap.Map('container');
</script>

异步方式创建地图一

//创建地图，并把地图引入id为container的容器
<script>
window.init = function(){
　　new AMap.Map('container');
}
</script>

//引入地图js，并把js回调到上面init
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=init&callback=init"></script>

//创建地图，并把地图引入id为container的容器
<style type="text/css">
#container{width: 100%;height: 600px;}
</style>

//需要引入地图的容器
<div id="container"></div>

异步方式创建地图二

<script>

//页面结构加载后，创建地图，并把地图引入id为container的容器

window.onload = function(){
var map = new AMap.Map('container');
}

//引入地图js，并把js回调到上面onload

var url = 'https://webapi.amap.com/maps?v=1.4.15&key=a0d7b810657a85a184d1e5ace41d7e5e&callback=onload';

//创建script，并把url赋值给src属性
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;

//把生成的script添加到head标签后面
document.head.appendChild(jsapi);
</script>

地图初始配置

设置地图级别和中心点（初始化方式）

var map = new AMap.Map('container',{zoom:11,center:[120,30]});

查看地图级别/中心点

console.log(map.getZoom()); //查看地图当前的级别
console.log(map.getCenter().toString()); //查看地图当前中心点

设置地图级别/中心点（用户交互方式）

 //设置地图级别
 var jibie = document.getElementById('jibie');
 var queren = document.getElementById('queren');
 queren.onclick = function(){
 map.setZoom(jibie.value);   //获取文本框里面的数字级别
 <div id="cc">
 <input type="number" id="jibie" />
 <button type="button" id="queren">确认</button>
 </div>

//设置地图中心点
setTimeout(function(){
map.setCenter([122,33])
},5000)

//设置级别和中心点
setTimeout(function(){
map.setZoomAndCenter(11,[120,30])
},5000)

地图事件

//当地图移动后触发
map.on('moveend',function(){})  

//当地图级别发生改变后触发
map.on('zoomend',function(){})

查看当前中心点行政区

var cc = document.getElementById('cc');
map.on('moveend',function(){

map.getCity(function(info){
cc.innerText = "地图中心位置为：" + info.province + ' ' + info.city + ' ' + info.district;
console.log(info);
})

<div id="cc">
12345
</div>

设置当前中心点行政区

var que = document.getElementById('que');
var diqu = document.getElementById('diqu');
que.onclick = function(){
map.setCity(diqu.value );

<div id="xingzheng">
<input type="text" name="" id="diqu" />
<button id="que">确认设置</button>
</div>