百度地图自定义覆盖物及创建多个小图标

来源:互联网 发布:非诚勿扰杨宇航淘宝店 编辑:程序博客网 时间:2024/06/06 07:05
// 百度地图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);


}
原创粉丝点击