最近项目需要地图定位,想到百度地图API。所以学习一下。还是很容易上手的。
首先贴出百度地图API的官网,上面有很详细的教程。
http://lbsyun.baidu.com/index.php?title=jspopular
具体详细步骤请参考官网。我记录下我自己的demo
申请完百度开发者之后,会有个ak密匙,这个你需要保存下来。很多地方需要用到
下面进入开发:建立一个html页面
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 定位并显示当前地址
//theLocation();
map.enableScrollWheelZoom(true);//启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用连续缩放效果,默认禁用
map.enableInertialDragging();//启用地图惯性拖拽,默认禁用
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
var top_left_navigation = new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_SMALL}); //左上角,添加默认缩放平移控件
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(new BMap.OverviewMapControl()); //默认位于地图右下方,是一个可折叠的缩略地图
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京")
// 创建地图实例
var point = new BMap.Point(116.404,39.915);
// 创建点坐标
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//panTo()方法将让地图平滑移动至新中心点
window.setTimeout(function(){
map.panTo(new BMap.Point(116.414,39.925));
}, 2000);
// 定义一个控件类,即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元素在该方法中返回。
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.zoomTo(map.getZoom() + 2);
}
map.getcontainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
</script>
</body>
</html>
这里有怎样创建一个简单的地图和怎样设置控件以及自定义控件。