<!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>
