<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>加载天地图标注</title>
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script src="../practice/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
#mapDiv{
height:600px;
margin: 10px;
border: 1px solid #ccc;
}
.opt_station_hover{
background: rgb(77,103,130);
font-size: 12px;
width: 150px;
height: 47px;
border-radius: 5px;
}
.opt_station_hover_ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 23px;
text-indent: 4px;
color: white;
position: relative;
}
.opt_station_hover_ul li{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 23px;
}
.opt_station_hover img{
position: absolute;
left: 50%;
margin-left: -5px;
}
.opt_li_left{
width: 65px;
display: bolck;
float: left;
text-align: right;
}
</style>
<body>
<div id="mapDiv"></div>
<script type="text/javascript">
//地址 图片 三张 数据
var map;
var timer;//悬停的计时器。
var lnglats;//点数据。
var customerWinInfo;//鼠标移动上去显示的信息窗口
var markers = [];
var xian=[];
var lnglats = [
{"B":"23.1","L":"113.3","PName":"1111"},
{"B":"23.2","L":"113.4","PName":"2222"},
{"B":"22.9","L":"113.1","PName":"3333"},
{"B":"23.7","L":"113.8","PName":"第四个点"},
{"B":"23.8","L":"113.5","PName":"第五个点"},
{"B":"23.3","L":"113.2","PName":"第六个点"},
{"B":"23.1","L":"113.7","PName":"7777"},
{"B":"23.5","L":"113.3","PName":"8888"}];
//这是页面需要的数据。实际应用中常用ajax获取。坐标点状态。点的类型。点的名字。
function loadData(){
$.ajaxSettings.async = false;
$.getJSON('php/loadIcon.php','', function(json, textStatus) {
lnglats = json;
});
$.ajaxSettings.async = true;
}
//加载基本地图和导航
function loadMap(){
try {
map = new TMap("mapDiv"); //初始化地图对象
map.centerAndZoom(new TLngLat(113.3893, 23.04954), 10);//设置显示地图的中心点和级别
map.enableHandleMouseScroll(); //允许鼠标双击放大地图
} catch(err) {
alert('天地图加载不成功，请稍候再试！你可以先使用其他功能！');
}
}
//鼠标从图标移动出去的时候执行
function onClose() {
clearTimeout(timer);
map.removeOverLay(customerWinInfo);
}
//把标注点名字画到地图上
function loadText(){
var label =[];//标点名字图。
if (lnglats.length != 0) {
for (var i = 0; i < lnglats.length; i = i + 1) {
var config = {
text:lnglats[i].PName,
offset:new TPixel(0,10),
position:new TLngLat(lnglats[i].L,lnglats[i].B)
};
xian.push(new TLngLat(lnglats[i].L,lnglats[i].B));
label[i]=new TLabel();//创建地图文本对象
label[i].setAnchorPer([0.5,0]);//偏移量
label[i].setBorderLine (0);
map.addOverLay(label[i]);
$('.stationByNum').parent().css({
"padding":"0"
});
}
}
}
//鼠标移动到移动站上面的时候执行
function onMouseOver(m) {
var html = [];
var status ='';
//status = lnglats[m.id].Status == 1?'在线':'不在线';
html.push(" <div class='opt_station_hover' id='device_online'>");
html.push(" <ul class='opt_station_hover_ul'>");
html.push(" <li><span class='opt_li_left'>名称：</span>"+lnglats[m.id].PName +"</li>");
//html.push(" <li><span class='opt_li_left'>在线状态：</span>"+status +"</li>");
//html.push(" <img src='A.png'>");
html.push(" </ul>");
html.push(" </div>");
var config = {
offset:new TPixel(30,-60),
position:m.getLngLat()
};
customerWinInfo=new TLabel(config);
customerWinInfo.setLabel(html.join(''));
customerWinInfo.setAnchorPer([0.5,0]);//偏移量
customerWinInfo.getObject().style.zIndex = 10000;
map.addOverLay(customerWinInfo);
$('.opt_station_hover').parent().css({
"border":"none",
"padding":"0",
"background-color":""
});
}
//绘制多个marker。
function drawTMakers(lnglats){
markers.length = 0;
if (lnglats.length != 0) {
var iconurl ='A.png';
var iconurl1 = 'A.png';
icon = new TIcon(iconurl, new TSize(20, 20), {anchor: new TPixel(12, 12)});//两种图标，根据status判断用哪一种。
icon1 = new TIcon(iconurl1, new TSize(20, 20), {anchor: new TPixel(12, 12)});
for (var i = 0; i < lnglats.length; i = i + 1) {
if (i == 1) {//这个地方照张图片起点和终点
markers[i] = drawTMaker(lnglats[i],icon);
} else {
markers[i] = drawTMaker(lnglats[i],icon1);
}
markers[i].id=i;
}
}
}
//往地图上添加一个marker。传入参数坐标信息lnglat。传入参数图标信息。
function drawTMaker(lnglat,icon){
var marker = new TMarker(new TLngLat(lnglat.L, lnglat.B), {icon: icon});
map.addOverLay(marker);
return marker;
}
//加载mouseover与mouseout事件。
//iconMakers是已添加的标注对象。
//lnglats是每个点的数据对象。通常iconMakers的length等于lnglats的length。
//eventFn是传入 鼠标移动上去要调用哪个函数。默认是onMouseOver。主要是用于鼠标移动到点上可以显示出不同样式的窗口。
function addTEvent(iconMakers,lnglats,eventFn){
var arrLen = lnglats.length;
var i,eventFn = eventFn || onMouseOver;
for (var i = 0; i<arrLen; i++) {
iconMakers[i].id=i;
// 绑定事件
(function() {
var m = iconMakers[i];
TEvent.addListener(m, "mouseover",function() {
timer = setTimeout(mover, 500);//setTimeout不能带参数，所以用下面的方法处理。
function mover() {
eventFn(m);
}
});
TEvent.addListener(m, "mouseout", onClose);
})();
}
}
function huaXian()
{
var line = new TPolyline(xian,{strokeColor:"red", strokeWeight:5, strokeOpacity:1});
//向地图上添加线
map.addOverLay(line);
}
loadData();//加载数据
loadMap();//加载地图
drawTMakers(lnglats);//绘制标注。
addTEvent(markers,lnglats);//给标注添加事件。
loadText();//给标注添加名字
huaXian();
</script>
</body>
</html>