浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

JavaScript API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。免费对广大用户开放。

地图展示
我们从展示一个以北京的天安门为中心的地图开始。以下为Demo和示例。
1编写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>Baidu Map </title>  
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>  
</head>  
<body>
</body>  
</html>
2引入百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
3初始化地图逻辑
首先创建地图实例,之后用一个Point坐标点和缩放级别来初始化地图。
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别  
4开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的,需要配置开启。
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
至此,我们完成了一个更加完整的地图展示的例子。