<!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('限制區域：\n西南坐標[' + limitBounds.southwest.lng + ',' + limitBounds.southwest.lat + ']\n')
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簡單的弄出來的，主要通過高德地圖的獲取當前屏幕的限制區域里的獲取限制區域坐標拼湊成的。