创建地图
- 去高德地图官网申请key值
- 引入自己的key值
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
- 申请一个容器div
- .创建地图 new AMap.Map(‘容器的名字’);
获取级别和中心点
zoom:11
center:[120,33]
zoom的数字越大,显示的越精细,越小显示的范围越大
getZoom() 获取地图的级别
getCenter() 获取地图中心位置
on(‘moveend’) //地图移动结束时
on(‘zoomend’)//地图级别发生变化时
设置级别和中心点
setZoom() 设置地图的级别
setCenter() 设置地图的中心点
setZoomAndCenter() 同时设置地图的级别和中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个地图</title>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0"></script>
<style type="text/css">
* {margin: 0;padding: 0;}
#container { width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
#setZoomNode,#setCenterNode{width: 360px;height: 100px; position: absolute;z-index: 99;right: 20px;top: 20px;border: 1px solid black;box-shadow: 0 0 5px black;background: white;}
</style>
</head>
<body>
<div id="container"></div>
<div id="setCenterNode">
x:<input type="" name="" id='xNode'>
y:<input type="" name="" id='yNode'>
zoom:<input type="text" name="" id='zoomVal'>
<button id='btn'>确定</button>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11,//初始的地图级别
center: [121, 30]//初始化地图的中心点
});
//通过事件来给他设定级别
btn.onclick = function () {
map.setZoomAndCenter(zoomVal.value,[xNode.value,yNode.value]);
}
//当中心点发生变化时
map.on('moveend', function () {
console.log(map.getZoom());
console.log(map.getCenter().toString());
});
//当双击级别发生变化时
map.on('zoomend', function () {
console.log(map.getZoom());
console.log(map.getCenter().toString());
})
</script>
</body>
</html>
获取地图的行政区
map.getCity(function(info){
info 当前中心点的行政区
})
设置地图的行政区
map.setCity(‘字符串’)
想让地图到达该地区的中心点
获取地图的范围
getBounds().northeast //右上角的坐标
getBounds().southwest //左下角左边
设置地图的范围
var myBounds = new AMap.Bounds(左下角坐标的数组,右上角坐标的数组)
map.setBounds(myBounds) //但是不是特别精准,会以它觉得最好的方式去显示
设置显示范围
getBounds() // northeast.P / R southwest.P / R
setLimitBounds() ;
清除设定的显示范围
clearLimitBounds();
地图的平移
panBy(x,y) x代表向左平移多少像素 / y代表向上平移多少像素
panTo([x坐标,y坐标]) 地图会直接平移到这个位置
获取鼠标的经纬度
e.lnglat.lng / lat
设置地图鼠标的默认样式
setDefaultCursor(‘样式’)
cursor : 里面所有的样式都可以
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高德地图小工具栏</title>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0"></script>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#setCenterNode {
width: 400px;
height: 300px;
position: absolute;
z-index: 9;
left: 20px;
top: 20px;
border: 1px solid black;
box-shadow: 0 0 5px black;
background: white;
text-align: center;
line-height: 50px;
}
.nowCity {
position: absolute;
right: 10px;
bottom: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div id='setCenterNode'>
<h2 class="tabs">工具栏</h2>
<p>
<span>搜索城市</span>
<input type="text" id="cityNode" />
<button id="cityBtn">确定</button>
</p>
<p>
<span>设置显示级别</span>
<input type="text" id="zoomNode" />
<button id="zoomBtn">确定</button>
</p>
<button id="btnClear">解除范围限制</button>
<br />
<div class="nowCity">您当前所在/直辖市:<span id="nowCity"></span></div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11,
center: [116.379391, 39.861536]
});
//设置地图的显示范围
var myBounds = map.getBounds();
map.setBounds(myBounds);
//设置显示范围限制-->现在地图显示北京
map.setLimitBounds(myBounds);
//搜索城市
cityBtn.onclick = function () {
map.setCity(cityNode.value);
}
//设置级别
zoomBtn.onclick = function () {
map.setZoom(zoomNode.value);
}
//单机清除按钮,通过isLimit的状态判断是否清除限制
var isLimit = false;
btnClear.onclick = function () {
if (isLimit == false) {
btnClear.innerHTML = '已解除范围限制';
map.clearLimitBounds(myBounds);
isLimit = true;
} else {
map.setLimitBounds(myBounds);
btnClear.innerHTML = '接触范围限制';
isLimit = true;
}
}
//当前行政中心
map.getCity(function (info) {
nowCity.innerHTML = info.province;
});
//绑定moveend事件
map.on('moveend', function (info) {
map.getCity(function (info) {
nowCity.innerHTML = info.city;
});
})
</script>
</body>
</html>```