近期项目中需要使用图表分析和地图控件、网上有很多，我们选择了百度的echars，一些知识点和使用案例，记下来，方便以后使用。
百度map：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a5b0
echars网址：https://www.echartsjs.com/faq.html#line-chart
百度map使用需要注册一个ak ，是访问一些接口必备的。
以下是项目中一些应用的场景，点击某一个国家，跳转到对应国家的信息。
根据坐标获取访问的是哪个国家：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
#allmap {width:100%;height:500px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o0wiBk7uEwSbGBxcnDleizw7AyLGBVPt"></script>
<title>逆地址解析</title>
</head>
<body>
<div id="allmap"></div>
<p>点击地图展示详细地址</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap",{minZoom:2,maxZoom:4}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(116.4035,39.915),4);
map.enableScrollWheelZoom(true);
//var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
console.log(pt);
//GET请求
var api_host="http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location="+pt.lat+","+pt.lng+"&output=json&pois=1&ak=your_ak"
console.log(api_host);
/*geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
console.log(rs);
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
}); */
});
</script>百度地图使用的场景案例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
#r-result{width:100%;margin-top:5px;}
p{margin:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>设置地图最大、最小级别</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" onclick="add_control();" value="添加" />
<input type="button" onclick="delete_control();" value="删除" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap",{minZoom:2,maxZoom:4}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(116.4035,39.915),4);
map.enableScrollWheelZoom(true);
//点击地图事件
function showInfo(e){
console.log(e);
console.log(e.currentTarget.Xg);
alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
var mapType1 = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
);
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
//添加地图类型和缩略图
function add_control(){
map.addControl(mapType1); //2D图，混合图
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
}
//移除地图类型和缩略图
function delete_control(){
map.removeControl(mapType1); //移除2D图，混合图
map.removeControl(overView);
map.removeControl(overViewOpen);
}
</script>
===========================================
添加定位按钮
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
#r-result{width:100%;margin-top:5px;}
p{margin:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>设置地图最大、最小级别</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap",{minZoom:2,maxZoom:4}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(116.4035,39.915),4);
map.enableScrollWheelZoom(true);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
// var address = '';
// address += e.addressComponent.province;
// address += e.addressComponent.city;
// address += e.addressComponent.district;
// address += e.addressComponent.street;
// address += e.addressComponent.streetNumber;
// alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
//alert(e.message);
});
map.addControl(geolocationControl);
</script>
==================================================
添加自定义控件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>添加自定义控件</title>
</head>
<body>
<div id="allmap"></div>
<p>在地图左上角添加"放大2级"自定义控件，双击放大地图2级</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
</script>
===================================
地图点击事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图单击事件</title>
</head>
<body>
<div id="allmap"></div>
<p>添加点击地图监听事件，点击地图后显示当前经纬度</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
#allmap {width:100%;height:500px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o0wiBk7uEwSbGBxcnDleizw7AyLGBVPt"></script>
<title>逆地址解析</title>
</head>
<body>
<div id="allmap"></div>
<p>点击地图展示详细地址</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap",{minZoom:2,maxZoom:4}); // 创建Map实例,设置地图允许的最小/大级别
map.centerAndZoom(new BMap.Point(116.4035,39.915),4);
map.enableScrollWheelZoom(true);
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
console.log(rs);
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
</script>