<!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://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.info-tip {
position: absolute;
top: 10px;
right: 10px;
font-size: 12px;
background-color: #fff;
height: 35px;
text-align: left;
}
</style>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.1&key=e8d46aac0458718b3dd72a25d9b8e250"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input id="setFitView" class="button" type="button" value="地图自适应显示" />
</div>
<div class="info-tip">
<div id="centerCoord"></div>
<div id="tips"></div>
</div>
<script>
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 13
});
map.clearMap(); // 清除地图覆盖物
window.setInterval(function () {
$.ajax({
//接口返回位置信息,数据来自数据库
//json格式[{"icon": "../css/blue.png","position": [经度数据,纬度数据]},{"icon": "../css/red.png","position": [经度数据,纬度数据]}]
url: 'API/getLocation',
type: 'GET',
dataType: 'json',
success: function (data) {
$.each(data, function (i) {
var count = i + 1;
$("#tips").html('成功添加' + count + '个点标记！');
new AMap.Marker({
map: map,
icon: data[i].icon,
position: [data[i].position[0], data[i].position[1]],
offset: new AMap.Pixel(-12, -36)
});
});
}
});
map.clearMap(); // 清除地图覆盖物
},
2000); //2秒查询一次最新地址信息
var center = map.getCenter();
var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
document.getElementById('centerCoord').innerHTML = centerText;
// 添加事件监听, 使地图自适应显示到合适的范围
AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function () {
var newCenter = map.setFitView();
document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
document.getElementById('tips').innerHTML = '点标记已全部显示在视野中！';
});
</script>
</body>
</html>
