// 百度地圖API功能
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安門</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='天安門'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安門坐落在中國北京市中心,故宮的南側,與天安門廣場隔長安街相望,是清朝皇城的大門...</p>" +
"</div>";
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(sContent); // 建立資訊視窗物件
map.centerAndZoom(point, 15);
map.addOverlay(marker);
marker.addEventListener("click", function() {
this.openInfoWindow(infoWindow);
//圖片載入完畢重繪infowindow
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); //防止在網速較慢，圖片未載入時，生成的資訊框高度比圖片的總高度小，導致圖片部分被隱藏
}
});


/*這裡的資料就是ajax獲取的*/


var result = [{
"longitude": "110.404",
"latitude": "37.915",
"temperature": "37°C",
"pressure": "500pa",
"wind": "5級",
"name": "測試資料1"
},
{
"longitude": "110.304",
"latitude": "37.915",
"temperature": "30°C",
"pressure": "700pa",
"wind": "6級",
"name": "測試資料2"
},
{
"longitude": "116.404",
"latitude": "39.915",
"temperature": "30°C",
"pressure": "700pa",
"wind": "5級",
"name": "測試資料3"
},
{
"longitude": "116.304",
"latitude": "39.915",
"temperature": "30°C",
"pressure": "700pa",
"wind": "4級",
"name": "測試資料4"
},
{
"longitude": "115.404",
"latitude": "29.815",
"temperature": "30°C",
"pressure": "700pa",
"wind": "2級",
"name": "測試資料5"
},
{
"longitude": "115.404",
"latitude": "29.915",
"temperature": "30°C",
"pressure": "700pa",
"wind": "1級",
"name": "測試資料6"
}


];


function addMarker(point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);


}
var opts = {
width: 140, // 資訊視窗寬度
height: 160, // 資訊視窗高度
enableMessage: false //設定允許資訊窗傳送短息
};
// 隨機向地圖新增25個標註
var data = new Array();
for(var i = 0; i < result.length; i++) {
var data1 = new Array();
data1[0] = result[i].longitude;
data1[1] = result[i].latitude;
map.centerAndZoom(new BMap.Point(result[i].longitude, result[i].latitude), 12);
map.enableScrollWheelZoom(true);
var str = '<div class="content">';
str += '<p>大氣溫度：' + result[i].temperature + '</p>';
str += '<p>大氣壓：' + result[i].pressure + '</p>';
str += '<p>風速：' + result[i].wind + '</p>';
str += '<p>風速：' + result[i].name + '</p>';
str += "</div>";
data1[2] = str;
data[i] = data1;
}
  var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，新增比例尺
var top_left_navigation = new BMap.NavigationControl();  //左上角，新增預設縮放平移控制元件
map.addControl(top_left_control);        
map.addControl(top_left_navigation);   
var data_info = data;
for(var i = 0; i < data_info.length; i++) {
var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1])); // 建立標註
var content = data_info[i][2];
map.addOverlay(marker); // 將標註新增到地圖中
addClickHandler(content, marker);
clickme(i, content);
}


function addClickHandler(content, marker) {
marker.addEventListener("click", function(e) {
openInfo(content, e)
});
}


function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 建立資訊視窗物件 
map.openInfoWindow(infoWindow, point); //開啟資訊視窗
}


function clickme(i, content) {


// alert(i);


}