试手百度地图API 和练习的Highcharts

来源：互联网发布：下载优化清理大师编辑：程序博客网时间：2024/06/06 17:00

<%@ 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>

<%@ 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>

阅读全文

0 0