http://lbsyun.baidu.com/apiconsole/key?application=key
按步骤 激活
申请密钥：
善变箭头所指的就是您的密钥
引入HTML文件中即可：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"> //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" </script>
demo文档（开发指南）
http://lbsyun.baidu.com/index.php?title=jspopular
http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld
<!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=您的密钥"> //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" </script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script> </body> </html>
示例1：（IP定位获取当前城市）
<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:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>IP定位获取当前城市</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); function myFun(result){ var cityName = result.name; map.setCenter(cityName); alert("当前定位城市:"+cityName); } var myCity = new BMap.LocalCity(); myCity.get(myFun); </script>
示例2：（城市名定位获取当前城市）
<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{height:500px;width:100%;} #r-result{width:100%; 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 id="cityName" type="text" style="100px; margin-right:10px;" /> <input type="button" value="查询" onclick="theLocation()" /> </div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,11); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 function theLocation(){ var city = document.getElementById("cityName").value; if(city != ""){ map.centerAndZoom(city,11); // 用城市名设置地图中心点 } } </script>