試手百度地圖API 和練習的Highcharts <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px"></div>
<script>
// JS 代碼
$(function() {
$('#container').highcharts({
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : '2014 某網站各浏覽器浏覽量占比'
},
tooltip : {
headerFormat : '{series.name}<br>',
pointFormat : '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
format : '<b>{point.name}</b>: {point.percentage:.1f} %',
style : {
color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
|| 'black'
}
}
}
},
series : [ {
type : 'pie',
name : '浏覽器通路量占比',
data : [
[ 'Firefox', 45.0 ],
[ 'IE', 26.8 ],
{
name : 'Chrome',
y : 12.8,
sliced : true,
selected : true
},
[ 'Safari', 8.5 ],
[ 'Opera', 6.2 ],
[ '其他', 0.7 ]
]
} ]
})
})
</script>
</body>
</html>
試手百度地圖API 和練習的Highcharts <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YvVRQQBgRtjc62oF9BURz5Ws93pyYyz8"></script>
<title>Insert title here</title>
</head>
<body>
<div id="container" style="width: 400px; height: 400px;float: left;" ></div>
<div id="allmap" style="width: 700px; height: 700px">
</div>
<script type="text/javascript">
$(function(){
$("#container").highcharts({
chart:{
type:'column'
},
title:{
text:"測試而已",
},
subtitle:{
text:'下表'
},
plotOptions:{
pie:{
allowPointSelect:true,
cursor:'pointer',
dataLabels:{
enabled:true,
format:'<b> {point.name}<b>: {point.percentage: .lf}%',
style:{
color:(Highcharts.theme&&Highcharts.theme.contrastTextColor)||'blcak'
}
}
}
},
xAxis:{
categories:[
"一月",
"二月",
"三月",
"四月",
"五月",
"六月"
]
},
yAxis:{
min:0,
title:{
text:"人數"
}
},
series:[{
name:'JAVA',
data: [12,13,30,50,70,99]
},{
name:'JS',
data:[20,33,77,90,120,150]
},{
name:'Spring',
data:[15,18,40,80,170,260]
}]
});
})
// 百度地圖API功能
/* var map = new BMap.Map("allmap"); // 建立Map執行個體
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點坐标和地圖級别
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
*/
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.64964385,34.75661006);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){console.log(r.point)
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);//标出所在地
map.panTo(r.point);//地圖中心移動
alert('您的位置：'+r.point.lng+','+r.point.lat);
var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的經緯度查找所在地省市街道等資訊
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents; console.log(rs.address);//位址資訊
alert(rs.address);//彈出所在位址
});
}else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
map.enableScrollWheelZoom(true);
</script>
</body>
</html>
