地图添加标记物 并添加点击弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图管理</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/Recharge.css" rel="stylesheet" type="text/css" />
<link href="css/input.css" rel="stylesheet" type="text/css" />
<link href="css/time.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/manage.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eLjXm9BSkrtELQVsgcG98tKe"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<title>地图管理</title>
<style type="text/css">
.anchorBL{display:none;}
img {
height: 20px;
margin-top: 5px;
width: 17px;
line-height: 20px;
margin-left:10px;
}
.infoBoxContent{font-size:12px;}
.infoBoxContent .title{background:red no-repeat;height:42px;width:272px;}
.infoBoxContent .title strong{font-size:14px;line-height:42px;padding:0 10px 0 5px;}
.infoBoxContent .title .price{color:#FFFF00;}
.infoBoxContent .list{width:268px;border:solid 1px #4FA5FC;border-top:none;background:#fff;height:260px;}
.infoBoxContent .list ul{margin:0;padding:5px;list-style:none;}
.infoBoxContent .list ul li {float:left;width:255px;border-bottom:solid 1px #4FA5FC;padding:2px 0;}
.infoBoxContent .list ul .last{border:none;}
.infoBoxContent .list ul img{width:53px;height:42px;margin-right:5px;}
.infoBoxContent .list ul p{padding:0;margin:0;}
.infoBoxContent .left{float:left;}
.infoBoxContent .rmb{float:right;color:#EB6100;font-size:14px;font-weight:bold;}
.infoBoxContent a{color:#0041D9;text-decoration:none;}
</style>
</head>
<body>
<div class="un_bj ov_hidden">
<!-- 搜索面板开始 -->
<div class="showadress">
<div class="search-btn">
<input class="showadress-input" type="text" placeholder="请输入设备名称/序列号/地址" />
<button value="查询">查询</button>
</div>
<div class="easyui-layout">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div class="content" margin="5px">
<ul id="tree" class="tree easyui-tree" data-options="animate:true,lines:true">
<li id="tree-child" state="open" iconCls="icon-ok">
<span>开启1路</span>
<ul>
<li data-option="iconCls:'icon-ok">
<span>脉冲</span>
</li>
<li data-option="iconCls:'icon-group_delete">
<span>流量计</span>
</li>
</ul>
</li>
<li class="tree-child" state="closed" data-options="iconCls:'icon-joystick'">
<span>开启2路</span>
<ul>
<li data-option="iconCls:'icon-joystick_add">
<span>2路脉冲</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>2路流量计</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>1路流量计1路脉冲</span>
</li>
</ul>
</li>
<li class="tree-child" state="closed" data-options="iconCls:'icon-joystick'">
<span>开启3路</span>
<ul>
<li data-option="iconCls:'icon-joystick_add">
<span>3路脉冲</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>3路流量计</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>2路流量计1路脉冲</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>1路流量计2路脉冲</span>
</li>
</ul>
</li>
<li class="tree-child" state="closed" data-options="iconCls:'icon-joystick'">
<span>开启4路</span>
<ul>
<li data-option="iconCls:'icon-joystick_add">
<span>4路脉冲</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>4路流量计</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>3路流量计1路脉冲</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>1路流量计3路脉冲</span>
</li>
<li data-option="iconCls:'icon-joystick_add">
<span>2路流量计2路脉冲</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 搜索面板结束 -->
<div id="main">
<div id="Allmap" style="width: 1500px; height:600px;border:1px solid red; margin: auto;">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript">
var myStyles = [{
url: 'img/gis/bubble5-ie8.png',
size: new BMap.Size(94,95),
opt_anchor: [16, 0],
textColor: 'white',
opt_textSize: 10
}, {
url: 'img/gis/bubble5-hover-ie8.png',
size: new BMap.Size(94,95),
opt_anchor: [40, 35],
textColor: '#ff0000',
opt_textSize: 12
}, {
url: 'img/gis/bubble5-hover-ie8.png',
size: new BMap.Size(94,95),
opt_anchor: [32, 0],
textColor: 'red',
opt_textSize: 14
}];
var map = new BMap.Map("Allmap",{enableMapClick:false}); // 创建地图实例
var point = new BMap.Point(116.417854,39.921988); // 创建点坐标
map.centerAndZoom(point, 5); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
}));
map.addControl(new BMap.ScaleControl());// 启用比例尺。
map.addControl(new BMap.OverviewMapControl());
//添加切换地图
map.addControl(new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP,BMAP_PERSPECTIVE_MAP,BMAP_SATELLITE_MAP]
}));
//全景地图
var stCtrl = new BMap.PanoramaControl(); //构造全景控件
stCtrl.setOffset(new BMap.Size(140,5));
map.addControl(stCtrl);//添加全景控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
//加载完地图事件
map.addEventListener("tilesloaded",function(){
addLable();
//addControl();
});
//添加自定义控件
function addControl(){
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //设置版权控件位置
map.addControl(cr); //添加版权控件
var bs = map.getBounds(); //返回地图可视区域
// cr.addCopyright({id: 1, content:
// '<span _cid="1"style="display: inline;"><div style="font-size:12px;margin:20px;padding:10px;">状态说明：' +
// '<span style="width:12px;height:12px;display:inline-block;">' +
// '</span>压力<span style="width:12px;height:12px;display:inline-block;">' +
// '</span>流量<span style="width:12px;height:12px;display:inline-block;"></span>有报警</div></span>', bounds: bs});
//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
}
//下面开始尝试数组（这是后台输出的数据，这里只能静态写一些做演示。
function createInfoWindow(i){
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title=''" +1 + "'>" +1 + "</b><p style='padding-top:8px;’><hr></p><div class='iw_poi_content'>"+2+"</div>");
return iw;
}
//初始化弹出框
function CustomContent(name,y,x,id,nameStr){
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText){
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.width = "150px"
div.style.background = "#FFFFFF";
div.style.borderRadius = "4px";
div.style.cursor = "pointer";
div.style.height = "30px";
div.style.lineHeight = "20px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "13px"
div.style.boxShadow = "1px 1px 1px #666";
div.setAttribute("title", nameStr);
var span = this._span = document.createElement("span");
if (id == 1) {
span.style.background = "red";
} else {
span.style.background = "#2196F3";
}
span.style.width = "60px";
span.style.height = "30px";
span.style.color = "#fff";
span.style.float = "left";
span.style.textAlign = "center";
span.style.borderRadius = "4px 0 0 4px";
span.style.lineHeight = "30px";
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;
var arrow = this._arrow = document.createElement("span");
arrow.style.borderLeft = "5px solid transparent";
arrow.style.borderRight = "5px solid transparent";
if (id == 1) {
arrow.style.borderTop = "9px solid red";
} else {
arrow.style.borderTop = " 9px solid #2196F3";
}
arrow.style.display = "block";
arrow.style.position = "absolute";
arrow.style.top = "30px";
arrow.style.left = "17px";
div.appendChild(arrow);
var imgDiv = this._imgDiv = document.createElement("div");
imgDiv.style.float = "left";
imgDiv.style.display = "inline-block";
div.appendChild(imgDiv);
var img1 = this.img1 = document.createElement("img");
var img2 = this.img2 = document.createElement("img");
var img3 = this.img3 = document.createElement("img");
if (id == 1) {
img1.src = "img/gis/press.png";
img2.src = "img/gis/flow.png";
img3.src = "img/gis/alarm.png";
imgDiv.appendChild(img1);
imgDiv.appendChild(img2);
imgDiv.appendChild(img3);
} else {
img1.src = "img/gis/press.png";
img2.src = "img/gis/flow.png";
imgDiv.appendChild(img1);
imgDiv.appendChild(img2);
}
div.onmouseover = function () {
this.style.backgroundColor = "gainsboro";
this.style.borderColor = "gainsboro";
}
div.onmouseout = function () {
this.style.backgroundColor = "#FFFFFF";
this.style.borderColor = "#FFFFFF";
}
////div.onclick=function() {
//}
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
ComplexCustomOverlay.prototype.addEventListener = function(event,fun){
this._div['on'+event] = fun;
}
var marker = new ComplexCustomOverlay(new BMap.Point(y, x),name);
return marker;
}
function addLable() {
var strJson = [
{
"id": 1,
"ymwId":"11111",
"name": "设备1..",
"nameStr": "设备1南京南京南京",
"y": 116.417854,
"x": 39.921988
},
{
"id": 2,
"ymwId":"22222",
"name": "设备2..",
"nameStr": "设备2南京南京南京",
"y": 116.406605,
"x": 39.921585
},
{
"id": 2,
"ymwId":"33333",
"name": "设备3..",
"nameStr": "设备3南京南京南京",
"y": 116.412222,
"x": 39.912345
},
{
"id": 2,
"ymwId": "55555",
"name": "设备5..",
"nameStr": "设备5南京南京南京",
"y": 106.698821,
"x": 29.599076
},
{
"id": 2,
"ymwId":"44444",
"name": "设备4..",
"nameStr": "设备4南京南京南京",
"y":106.688821,
"x": 29.539076
}
];
var markers = [];
var pt = null;
var marker;
var opts = {
width: 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "海底捞王府井店", // 信息窗口标题
enableMessage: true, //设置允许信息窗发送短息
message: "戳下面的链接看下地址喔~"
};
var poniters = [];
var infos = [];
for (var i = 0; i < strJson.length; i++) {
marker=CustomContent(strJson[i].name,strJson[i].y,strJson[i].x,strJson[i].id,strJson[i].nameStr);
pt = new BMap.Point(strJson[i].y, strJson[i].x);
poniters[i]=pt;
markers.push(marker);
var point = new BMap.Point(strJson[i].y,strJson[i].x);
map.addOverlay(marker);
infos[i] = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);
// var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
// marker.addEventListener("click", function () {
// map.openInfoWindow(infoWindow, point); //查看当前事件对象
// });
}
for (var j = 0; j < markers.length; j++) {
(function () {
var index = j;
markers[index].addEventListener("click", function () {
map.openInfoWindow(infos[index], poniters[index]);
});
})();
};
// $.each(markers, function (k, v) {
// v.addEventListener("click", function () {
// map.openInfoWindow(infos[0], poniters[0]);
// });
// });
// markers[0].addEventListener("click", function () {
// alert(poniters[0]);
// map.openInfoWindow(infos[0], poniters[0]);
// });
// markers[1].addEventListener("click", function () {
// alert(poniters[1]);
// map.openInfoWindow(infos[1], poniters[1]);
// });
// markers[2].addEventListener("click", function () {
// alert(poniters[2]);
// map.openInfoWindow(infos[2], poniters[2]);
// });
// markers[3].addEventListener("click", function () {
// map.openInfoWindow(infos[3], poniters[3]);
// });
// markers[4].addEventListener("click", function () {
// map.openInfoWindow(infos[4], poniters[4]);
// });
// for (var j =0;j<markers.length;j++){
// var _iw = createInfoWindow(j);
// markers[j].addEventListener("click", function() {
// map.openInfoWindow(_iw); //查看当前事件对象
// });
// }
// var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
// markerClusterer.setGridSize(100);
// markerClusterer.setMaxZoom(15);
// markerClusterer.setStyles(myStyles);
}
function addLableClick(){
}
</script>
</html>
