您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
百度地图javascript接口开发-百度地图使用入门
发布时间：2016-11-20 14:18:58编辑：雪饮阅读（）
申请ak密钥:
白名单使用”*”则不限制域名，即便在本地测试的html中也可以使用
地图初始化、添加标注、放大、缩小、移动示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale,user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>百度地图使用示例</title>
<style type="text/css">
html{
height:100%;
}
body{
height:100%;margin:0px;padding:0px;
}
#container{width:100%;height:1500px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s9vYSVwPjtPFv00vuxKzoNxD"></script>
<script type="text/javascript">
var map;//地图对象
var oldLongitude;//保存改变后的经度
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(109.01,32.42);//用经纬度生成一个点,第一个参数为经度，第二个为纬度
map.centerAndZoom(point,5);//15为地图以point为中心的放大级别，数字越大放大倍数就越大
map.enableScrollWheelZoom();//开启鼠标滚动对地图进行缩放
var marker=new BMap.Marker(point);//设置标注点
var point2=new BMap.Point(110.01,32.42);
var marker2=new BMap.Marker(point2);
map.addOverlay(marker);//添加标注
map.addOverlay(marker2);
}
function BiggerView(){
map.zoomTo(map.getZoom() + 10);
}
function Move(){
if(oldLongitude==109.01){
map.panTo(new BMap.Point(109.03,32.42));
oldLongitude=104.03;
}
else{
map.panTo(new BMap.Point(109.01,32.42));
oldLongitude=109.01;
}
}
function SmallerView(){
map.zoomTo(map.getZoom()-10);
}
</script>
</head>
<body onLoad="InitMap();">
<div id="bigger" onClick="BiggerView()">放大</div>
<div id="move" onClick="Move();">移动</div>
<div id="smaller" onClick="SmallerView();">缩小</div>
<div id="container"></div>
</body>
</html>
关键字词：百度地图api,javascript