1、获取密钥，JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用API接口。
格式如：http://api.map.baidu.com/api?v=1.5&ak=您的密钥
2、简单使用DEMO
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="maps.aspx.cs" Inherits="Maps.maps" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="<%= ResolveUrl("resource/jquery-1.7.min.js")%>" type="text/javascript"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=28acbd5650cf12af195e1ecaaf83472b"></script> <style type="text/css"> #ditu { 100%; height: 700px; } </style> </head> <body> <form id="form1" runat="server"> <div id="ditu"> </div> </form> <script> $(function() { //创建地图 var map = new BMap.Map("ditu"); window.map = map; //地图设置 map.enableDragging(); //启用地图拖拽事件，默认启用 map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用 map.enableKeyboard(); //启用键盘上下左右键移动地图 map.enableContinuousZoom(); //启用连续缩放效果 //添加地图控件 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.ScaleControl()); //添加默认比例尺控件 map.addControl(new BMap.OverviewMapControl({ isOpen: 1 })); //添加默认缩略地图控件 map.addControl(new BMap.MapTypeControl()); //添加控件展示的类型 包括 地图 卫星 三维 map.centerAndZoom('南京', 13); // 初始化地图,设置中心点坐标和地图级别。 }); </script> </body> </html>
3、添加简单的覆盖物、鼠标事件DEMO
<script> $(function () { //创建地图 var map = new BMap.Map("ditu"); window.map = map; //地图设置 map.enableDragging(); //启用地图拖拽事件，默认启用 map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用 map.enableKeyboard(); //启用键盘上下左右键移动地图 map.enableContinuousZoom(); //启用连续缩放效果 //添加地图控件 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.ScaleControl()); //添加默认比例尺控件 map.addControl(new BMap.OverviewMapControl({ isOpen: 1 })); //添加默认缩略地图控件 map.addControl(new BMap.MapTypeControl()); //添加控件展示的类型 包括 地图 卫星 三维 map.centerAndZoom('南京', 13); // 初始化地图,设置中心点坐标和地图级别。 //添加覆盖物 addPoint(); }); function addPoint() { var point = new BMap.Point(118.757917, 32.043227); map.centerAndZoom(point, 13); var myIcon = new BMap.Icon("resource/image/employee.gif", new BMap.Size(10, 18)); //创建标注图标 var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 //添加鼠标事件 marker.addEventListener("mouseover", function () { this.openInfoWindow(new BMap.InfoWindow( "" , { title: '<a href=" " target="_blank">' + "Hellow" + '</a>' } )); }); } </script>
4、GPS经纬度转百度地图经纬度
直接将经纬度在百度地图显示发现在一定的的偏移，其实我们获取的经纬度在地图上显示是需要做一个转换。
添加引用 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js "></script>
<script> $(function () { //创建地图 var map = new BMap.Map("ditu"); window.map = map; //地图设置 map.enableDragging(); //启用地图拖拽事件，默认启用 map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用 map.enableKeyboard(); //启用键盘上下左右键移动地图 map.enableContinuousZoom(); //启用连续缩放效果 //添加地图控件 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.ScaleControl()); //添加默认比例尺控件 map.addControl(new BMap.OverviewMapControl({ isOpen: 1 })); //添加默认缩略地图控件 map.addControl(new BMap.MapTypeControl()); //添加控件展示的类型 包括 地图 卫星 三维 map.centerAndZoom('南京', 13); // 初始化地图,设置中心点坐标和地图级别。 //添加覆盖物 addPoint(); }); function addPoint() { var point = new BMap.Point(118.757917, 32.043227); var myIcon = new BMap.Icon("resource/image/employee.gif", new BMap.Size(10, 18)); //创建标注图标 var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 //添加鼠标事件 marker.addEventListener("mouseover", function () { this.openInfoWindow(new BMap.InfoWindow( "" , { title: '<a href=" " target="_blank">' + "我是GPS坐标" + '</a>' } )); }); BMap.Convertor.translate(point, 0, function (currentPoint) { var marker = new BMap.Marker(currentPoint, { icon: myIcon }); map.addOverlay(marker); //添加鼠标事件 marker.addEventListener("mouseover", function () { this.openInfoWindow(new BMap.InfoWindow( "" , { title: '<a href=" " target="_blank">' + "我是百度地图坐标" + '</a>' } )); }); }); } </script>