01、高德地图

准备

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>

 

获取地图显示范围

var fan = document.getElementById('fan');
fan.innerText = "地图右上角坐标：" + map.getBounds().northeast + "，地图左下角坐标：" + map.getBounds().southwest;

 

设置地图显示范围

var myBounds = new Amap.Bounds([112,20] , [120,29]);    //左下角坐标的数组，右上角坐标的数组

map.setBounds(myBounds); //设置的精准度不高，会按照它觉得最好的来

 

 

限制地图显示范围

//限制地图的显示范围
var bounds = map.getBounds(); //限制地图的显示范围为：最初默认的显示范围
map.setLimitBounds(bounds);

//限制地图的显示范围（自定义）
var bounds = map.getBounds();
bounds.northeast.R = 118; //右上角横坐标
bounds.northeast.Q = 30; //右上角纵坐标

bounds.southwest.R = 110; //左下角横坐标
bounds.southwest.Q = 25; //左下角纵坐标

map.setLimitBounds(bounds);

 

 

清除限制显示范围

//清除限制范围
map.clearLimitBounds();

 

 

地图的平移

//地图平移（按像素平移）
setTimeout(function(){
map.panBy(600,0);  //第一个向左平移多少像素，第二个向上平移多少像素
},3000)
         
//地图中心点平移（经纬度）
setTimeout(function(){
map.panTo([116.405285,39.904989]);
},6000)

 

获取鼠标的经纬度

map.on('click',function(e){
console.log("经度："+e.lnglat.lng+"，纬度："+e.lnglat.lat);
})

 

 

设置地图鼠标默认样式

//设置鼠标默认样式
map.setDefaultCursor('pointer'); //只要是原来cursor属性有的都可以设置
}

 

 

地图的搜索

//地图搜索提示词
AMap.plugin('AMap.Autocomplete',function(){  //地图加载完毕后才能触发
            
    new AMap.Autocomplete().search('北京',function(status,data){  //输入字符后的提示词，如北京
        console.log(data);     //
        console.log(data.tips);  //data对象 包含 tips对象
        console.log(data.tips[0].name);  //tips的第一个name（提示词地址）
        console.log(data.tips[0].location.R);   //第一个提示词地址横坐标
        console.log(data.tips[0].location.Q);   //第一个提示词地址纵坐标
    })
})