![]()
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的key"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.3.0/echarts.common.min.js"></script>
</head>
<body>
<div id="allmap" style="width:1000px;height:500px"></div>
<div id="img-dom">
</div>
<div id="info">
<div>
<div><span>本月用量：</span><span id="e-used"></span><span>千瓦時</span></div>
</div>
<div>
<div><span>本月用量：</span><span id="w-used"></span><span>噸</span></div>
</div>
<div>
<div><span>本月用量：</span><span id="g-used"></span><span>升</span></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var energyGH=[
{id:1,name:'dom1','lat':116.51215,'lng':31.761567,img:'img/gis1.jpg', pie:[{add:'此處馬賽克',elec:13000,water:3400,gas:450}]},
{id:2,name:'dom2','lat':116.576108,'lng':31.804721,img:'img/gis2.jpg',pie:[{add:'此處馬賽克',elec:123000,water:12400,gas:1250}]},
{id:3,name:'dom3','lat':115.961647,'lng':32.334262,img:'img/gis3.jpg',pie:[{add:'此處馬賽克',elec:230000,water:122400,gas:4050}]},
]
// 百度地圖API功能
var map = new BMap.Map("allmap",{minZoom:9,maxZoom:15}); // 創建Map實例
map.centerAndZoom(new BMap.Point(116.526987,31.740469), 9); // 初始化地圖,設置中心點座標和地圖級別
//添加地圖類型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("六安"); // 設置地圖顯示的城市 此項是必須設置的
map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
var marker = new BMap.Marker(new BMap.Point(116.526987,31.740469));//創建標註
map.addOverlay(marker);
var opts = {
width : 200, // 信息窗口寬度
height: 200, // 信息窗口高度
title :"", // 信息窗口標題
enableMessage:true,//設置允許信息窗發送短息
}
//規劃中的充站
for(var j=0; j<energyGH.length; j++){
console.log(energyGH[j].name)
$("#img-dom").append("<img src="+ energyGH[j].img +" data-id="+ energyGH[j].id +" data-lat= "+ energyGH[j].lat +" data-lng="+ energyGH[j].lng +
" style='height:100px;width:auto' class='imgshow' onmouseover='hover("+ energyGH[j].lat+','+ energyGH[j].lng +','+ energyGH[j].id+','+JSON.stringify(energyGH[j].pie)+
")' onmouseout='hout("+ energyGH[j].lat+','+ energyGH[j].lng +','+ energyGH[j].id+")'>")
var myIcon = new BMap.Icon("img/o.png", new BMap.Size(16,24));
var markerGH = new BMap.Marker(new BMap.Point(energyGH[j].lat,energyGH[j].lng),{icon:myIcon});
var point = new BMap.Point(energyGH[j].lat,energyGH[j].lng);
map.addOverlay(markerGH);
var contentGH = "<div id='main' style='height:200px;width:200px;'></div>";
addClickHandler(contentGH,markerGH);
}
function hover(datalat,datalng,id,pie){
console.log(pie)
var myIcon = new BMap.Icon("img/h.png", new BMap.Size(16,24));
var marker = new BMap.Marker(new BMap.Point(datalat,datalng),{icon:myIcon});//創建標註
map.addOverlay(marker);
var id= id-1;
var contentGH = "<div id='main' style='height:200px;width:200px;'></div>";
var point = new BMap.Point(datalat,datalng);
var infoWindow = new BMap.InfoWindow(contentGH,opts); // 創建信息窗口對象
map.openInfoWindow(infoWindow,point); //開啓信息窗口
$("#e-used").text(pie[0].elec)
$("#w-used").text(pie[0].water)
$("#g-used").text(pie[0].gas)
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
color:['#78a2ef','#1CD3C0','#ffc559'],
title : {
text: pie[0].add,
x:'center',
textStyle:{
color:"#333",
fontSize:14
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '26%',
containLabel: true
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '60%',
center: ['50%', '65%'],
data:[
{value:pie[0].elec, name:'本月用量\n'+pie[0].elec+'<br>單位:Kw.h'},
{value:pie[0].water, name:'本月用量\n'+pie[0].water+'<br>單位:T'},
{value:pie[0].gas, name:'本月用\n'+pie[0].gas+'<br>單位:L'},
],
label: {
position: 'inside',
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
function hout(datalat,datalng,id){
var myIcon = new BMap.Icon("img/o.png", new BMap.Size(16,24));
var marker = new BMap.Marker(new BMap.Point(datalat,datalng),{icon:myIcon});//創建標註
map.addOverlay(marker);
var id= id-1;
var contentGH = "地址:" + energyGH[id].add+ "<br>車位：" +energyGH[id].num;
var point = new BMap.Point(datalat,datalng);
var infoWindow = new BMap.InfoWindow(contentGH,opts); // 創建信息窗口對象
map.closeInfoWindow(infoWindow,point); //開啓信息窗口
}
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); //開啓信息窗口
}
</script>
