<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>限制地图显示范围</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="tip">
<td class="column2">
当前： <input type="text" readonly="true" id="lnglat">
左下： <input type="text" readonly="true" id="lnglat2">
左上： <input type="text" readonly="true" id="lnglat4">
右上： <input type="text" readonly="true" id="lnglat3">
右下： <input type="text" readonly="true" id="lnglat5">
</td>
</div>
<div class="button-group">
<input type="button" class="button" onclick="setLimitBounds()" value="限定区域到当前视野" />
<input type="button" class="button" onclick="getLimitBounds()" value="获取限制的区域"/>
<input type="button" class="button" onclick="clearLimitBounds()" value="清除区域限制"/>
</div>
<script>
var map = new AMap.Map("container", {
resizeEnable: true
});
map.plugin(["AMap.CitySearch"], function() {
var citysearch = new AMap.CitySearch();
citysearch.getLocalCity();
AMap.event.addListener(citysearch, "complete", function(result) {
var citybounds;
if (result && result.city && result.bounds) {
citybounds = result.bounds;
map.setBounds(citybounds);
}
});
});
function setLimitBounds() {
map.setLimitBounds(map.getBounds());
}
function getLimitBounds() {
var limitBounds = map.getLimitBounds();
if (limitBounds) {
var tip = [];
tip.push('限制区域：
西南坐标[' + limitBounds.southwest.lng + ',' + limitBounds.southwest.lat + ']
')
tip.push('东北坐标[' + limitBounds.northeast.lng + ',' + limitBounds.northeast.lat + ']')
alert(tip.join(''));
} else {
alert('未设置限制区域');
}
}
function getLimitBounds2() {
var limitBounds = map.getLimitBounds();
if (limitBounds) {
document.getElementById("lnglat2").value = limitBounds.southwest.lng + ',' + limitBounds.southwest.lat;
document.getElementById("lnglat4").value = limitBounds.southwest.lng + ',' + limitBounds.northeast.lat;
document.getElementById("lnglat3").value = limitBounds.northeast.lng + ',' + limitBounds.northeast.lat;
document.getElementById("lnglat5").value = limitBounds.northeast.lng + ',' + limitBounds.southwest.lat;
// alert(tip.join(''));
} else {
// alert('未设置限制区域');
}
}
function clearLimitBounds() {
map.clearLimitBounds();
}
var map = new AMap.Map("container", {
resizeEnable: true
});
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
setLimitBounds() ;
getLimitBounds2();
clearLimitBounds();
});
var auto = new AMap.Autocomplete({
input: "tipinput"
});
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
}
}
</script>
</body>
</html>
该例子是通过高德提供的api简单的弄出来的，主要通过高德地图的获取当前屏幕的限制区域里的获取限制区域坐标拼凑成的。