You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
5.1 KiB
HTML
148 lines
5.1 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/bmap.css"/>
|
||
|
|
<title>Hello, World</title>
|
||
|
|
<style type="text/css">
|
||
|
|
html {
|
||
|
|
height: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
float: left;
|
||
|
|
height: 100%;
|
||
|
|
width: 50%
|
||
|
|
}
|
||
|
|
|
||
|
|
#right {
|
||
|
|
height: 100%;
|
||
|
|
width: 50%;
|
||
|
|
margin-left:50%;
|
||
|
|
}
|
||
|
|
.anchorBL{display:none;}
|
||
|
|
.infodiv{
|
||
|
|
max-width: 400px;
|
||
|
|
}
|
||
|
|
.mytable {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-collapse:collapse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mytable td {
|
||
|
|
border: 1px solid #C1DAD7;
|
||
|
|
background: #fff;
|
||
|
|
font-size:10px;
|
||
|
|
padding: 6px 6px 6px 12px;
|
||
|
|
color: #4f6b72;
|
||
|
|
text-wrap: normal;
|
||
|
|
}
|
||
|
|
.mytable th {
|
||
|
|
border: 1px solid #C1DAD7;
|
||
|
|
background: #82d2ff;
|
||
|
|
font-size:12px;
|
||
|
|
padding: 6px 6px 6px 12px;
|
||
|
|
color: #4f6b72;
|
||
|
|
}
|
||
|
|
.mytable thead th{
|
||
|
|
border: 1px solid #C1DAD7;
|
||
|
|
background: #1c87ff;
|
||
|
|
color:white;
|
||
|
|
font-size:12px;
|
||
|
|
padding: 6px 6px 6px 12px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="js/apiv2.0.min.js"></script>
|
||
|
|
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
<div id="right">
|
||
|
|
<iframe id="iframe1" scrolling="no" frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ height="100%"
|
||
|
|
width="100%" src=""></iframe>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var map = new BMap.Map("container",{minZoom : 4,maxZoom : 15 }); // 创建地图实例
|
||
|
|
map.addControl(new BMap.NavigationControl({
|
||
|
|
anchor: BMAP_ANCHOR_TOP_RIGHT, // 靠左上角位置
|
||
|
|
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
|
||
|
|
}));
|
||
|
|
var point = new BMap.Point(106.404, 39.915); // 创建点坐标
|
||
|
|
map.centerAndZoom(point, 5); // 初始化地图，设置中心点坐标和地图级别
|
||
|
|
//var infoWindow;
|
||
|
|
function addMarker(id,mc,coordinate,scale,voltagegrade,note,svgurl) {
|
||
|
|
var pointstr=coordinate.split(",");
|
||
|
|
if(pointstr.length<2)
|
||
|
|
{
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var markpoint = new BMap.Point(parseFloat(pointstr[0]), parseFloat(pointstr[1]));
|
||
|
|
var myIcon = new BMap.Icon("images/marker_red_sprite.png ", new BMap.Size(23, 25), {
|
||
|
|
offset: new BMap.Size(10, 25),
|
||
|
|
imageOffset: new BMap.Size(0, 0) // 设置图片偏移
|
||
|
|
});
|
||
|
|
var infostr="<div class='infodiv'><table class='mytable'>";
|
||
|
|
infostr=infostr+"<thead><tr class='title'><th colspan='2'>"+mc+"</th></tr></thead>";
|
||
|
|
infostr=infostr+"<tr style='display: none'><th>id</th><td>"+id+"</td></tr>";
|
||
|
|
infostr=infostr+"<tr><th>电压等级</th><td>"+voltagegrade+"kV</td></tr>";
|
||
|
|
infostr=infostr+"<tr><th>规模</th><td>"+scale+"</td></tr>";
|
||
|
|
infostr=infostr+"<tr><th>简介</th><td>"+note+"</td></tr>";
|
||
|
|
infostr = infostr+"</table></div>";
|
||
|
|
infostr=infostr.replace(/null/g,"");
|
||
|
|
var infoWindow= new BMap.InfoWindow(infostr); // 创建信息窗口对象
|
||
|
|
var marker = new BMap.Marker(markpoint, {icon: myIcon});
|
||
|
|
map.addOverlay(marker);
|
||
|
|
var len = mc.length;
|
||
|
|
var label = new BMap.Label(mc, {offset: new BMap.Size(-5 * (len-1), -20)});
|
||
|
|
marker.setLabel(label);
|
||
|
|
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
||
|
|
marker.addEventListener("click", function () {
|
||
|
|
//marker.setAnimation(BMAP_ANIMATION_DROP); //跳动的动画
|
||
|
|
$('#iframe1').attr('src', svgurl);
|
||
|
|
});
|
||
|
|
marker.addEventListener("mouseover", function () {
|
||
|
|
map.openInfoWindow(infoWindow, markpoint); //开启信息窗口
|
||
|
|
});
|
||
|
|
marker.addEventListener("mouseout", function () {
|
||
|
|
map.closeInfoWindow(infoWindow, markpoint); //开启信息窗口
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
$.getJSON('http://localhost:8000/xypg/public/index.php/map/bdmap', function (data) {
|
||
|
|
for(var i=0;i<data.length;i++)
|
||
|
|
{
|
||
|
|
var id=data[i].id;
|
||
|
|
var mc=data[i].mc;
|
||
|
|
var coordinate=data[i].coordinate;
|
||
|
|
var scale=data[i].scale;
|
||
|
|
var voltagegrade=data[i].voltagegrade;
|
||
|
|
var note=data[i].note;
|
||
|
|
var svgurl=data[i].svgurl;
|
||
|
|
if(id && mc && coordinate) {
|
||
|
|
addMarker(id, mc, coordinate, scale, voltagegrade, note, svgurl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
|
||
|
|
map.enableKeyboard()
|
||
|
|
map.addControl(new BMap.NavigationControl({
|
||
|
|
anchor: BMAP_ANCHOR_TOP_RIGHT, // 靠左上角位置
|
||
|
|
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
|
||
|
|
}));
|
||
|
|
</script>
|
||
|
|
</html>
|