1.官网申请百度API密匙
2.创建应用，获取百度地图密匙
3.地图Demo代码
此处Demo实现功能：
1.根据搜索框中的名称，定位地图。
2.用户点击地图时，显示该位置标注，并自动获取用户点击的位置与经纬度。
<!DOCTYPE html><html lang="en"><head><title>根据地址查询经纬度</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script src="http://api./api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script></head><body style="background:#CBE1FF"><div style="width:1200px;margin:auto;">要查询的地址：<input id="text_" type="text" value="广州" /><input type="button" value="查询" onclick="searchByStationName();" /><div id="container" style="position: absolute;margin-top:30px;top:0;bottom:0;left:0;right:0;border: 1px solid gray;overflow:hidden;"></div></div></body><script type="text/javascript">// getParentAddressName();var map = new BMap.Map("container");map.centerAndZoom("广州", 12);map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件map.addControl(new BMap.OverviewMapControl({isOpen: true,anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开map.addEventListener("click",function(e){//点击地图获取经纬度console.log(e.point)map.clearOverlays(); //清空原来的标注var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建标注，为要查询的地方对应的经纬度map.addOverlay(marker);getAddress(e.point)});var gc = new BMap.Geocoder();function getAddress(point){gc.getLocation(point,function(searchResult){console.log(searchResult.address)document.getElementById("text_").value=searchResult.address;})}var localSearch = new BMap.LocalSearch(map);localSearch.enableAutoViewport(); //允许自动调节窗体大小function searchByStationName() {map.clearOverlays(); //清空原来的标注var keyword = document.getElementById("text_").value;localSearch.setSearchCompleteCallback(function(searchResult) {var poi = searchResult.getPoi(0);map.centerAndZoom(poi.point, 13);var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度map.addOverlay(marker);marker.addEventListener("click", function() {this.openInfoWindow(infoWindow);});});localSearch.search(keyword);}</script></html>
4.效果
1.可以根据搜索框中的名称获取地图
