网页中使用js调用百度地图
首先得申请一个秘钥，步骤如下：
1.百度搜索“ 百度地图开放平台”。
2.然后填写账号登录，没有账号就注册一个，非常简单没什么可说的。
3.选择“我的应用”然后创建一个应用。
我们是网页调用，类型默认选服务器浏览器都行，有很多服务默认勾选的一般都足够我们使用了。填完之后提交。
4.然后查看我的应用，复制你的AK。
5.在你的jsp或者html引入链接，就可以调用百度地图接口了。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
//直接访问一下可以看到返回了一堆js。
6.示例。
<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:600px;width:1200px;} #r-result{width:100%; font-size:14px;} </style> <!-- 设置地图ak, api key 申请的密钥 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> <title>百度地图调用</title> </head> <body> <div id="allmap" ></div> <input type="button" onclick="$('#allmap div.anchorBL').hide();" value="移除地图LOGO和版权说明(不建议使用)"/> <input type="button" onclick="addYourCopyright()" value="自定义版权说明"/> <input type="button" onclick="showSZ()" value="深圳区域轮廓"/> <input type="button" onclick="showSH()" value="切换到上海市"/> <input type="button" onclick="addWalking()" value="步行路线图" /> <input type="button" onclick="addGeolocation()" value="定位控件" /> <input type="button" onclick="addCities()" value="城市列表控件" /> <input type="button" onclick="changeThemeDark()" value="切换显色主题" /> <div id="r-result"> <input type="button" onclick="add_control();" value="添加缩放控件" /> <input type="button" onclick="delete_control();" value="删除缩放控件" /> <input type="button" onclick="showOver()" value="显示带标注marker" /> <input type="button" onclick="hideOver()" value="隐藏带标注marker" /> <input type="button" onclick="marker.enableDragging();" value="可拖拽" /> <input type="button" onclick="marker.disableDragging();" value="不可拖拽" /> <input type="button" onclick="showVectorMarker()" value="显示VectorMarker" /> <input type="button" onclick="hideVectorMarker()" value="隐藏VectorMarker" /><br> <input type="button" onclick="showYourMarker()" value="显示自定义Marker" /> <input type="button" onclick="hideYourMarker()" value="隐藏自定义Marker" /> <input type="button" onclick="addTenMarkers()" value="添加10个标注" /> <input type="button" onclick="addTenRandomMarkers()" value="随机添加10个标注" /><br> 城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" /> <input type="button" value="查询" onclick="theLocation()" /> </div> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(120.391655,36.067588); map.centerAndZoom(point,15); // 初始化地图,用城市名设置地图中心点，显示比例级别 function showSH(){map.centerAndZoom("上海",15); } function theLocation(){ var city = document.getElementById("cityName").value; if(city != ""){ map.centerAndZoom(city,15); // 用城市名设置地图中心点，显示比例级别 } } //设置地图样式 dark function changeThemeDark(){ map.setMapStyle({style : "dark" });} //鼠标滚动缩放 map.enableScrollWheelZoom(true); //行政区域轮廓 function getBoundary(){ var bdary = new BMap.Boundary(); bdary.get("北京市昌平区", function(rs){ //获取行政区域 map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return ; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"green",fillColorOpacity:"0.1",fillOpacity: 0.1, strokeWeight:2, strokeOpacity:0.3}); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //调整视野 addlabel(); }); } //深圳行政区域轮廓 function showSZ(){ getBoundary(); } //setTimeout(function(){ // getBoundary(); //}, 2000); //百度地图级别有19级，级别 比例尺 // 19级 20m // 18级 50m // 17级 100m // 16级 200m // 15级 500m // 14级 1km // 13级 2km // 12级 5km // 11级 10km // 10级 20km // 9级 25km // 8级 50km // 7级 100km // 6级 200km // 5级 500km // 4级 1000km // 3级 2000km // 2级 5000km // 1级 10000km //在地图上添加图片文字等信息(版权控件) //Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数 var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); //设置版权控件位置 //添加版权控件 function addYourCopyright(){map.addControl(cr); } var bs = map.getBounds(); //返回地图可视区域 cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件</a>", bounds: bs}); // var cr=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_TOP_LEFT,offset:new BMap.Size(0,0)}); // map.addControl(cr); //cr.addCopyright({id:1,content:"<img src='banner.png' style='width:800px; height:50px' />"}); //需要更改为你的图片地址和名称 // 初始化地图， 设置中心点坐标和地图级别 //map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //setTimeout(function(){ // map.setZoom(14); //}, 2000); //2秒后放大到14级 var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件 var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮 /*缩放控件type有四种类型: BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/ //添加控件和比例尺 function add_control(){ map.addControl(top_left_control); map.addControl(top_left_navigation); map.addControl(top_right_navigation); } //移除控件和比例尺 function delete_control(){ map.removeControl(top_left_control); map.removeControl(top_left_navigation); map.removeControl(top_right_navigation); } // 添加定位控件 var geolocationControl = new BMap.GeolocationControl(); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; alert("当前定位地址为：" + address); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失败事件 alert(e.message); }); //添加定位到地图 function addGeolocation(){map.addControl(geolocationControl);} //城市列表 function addCities(){ var size = new BMap.Size(10, 20); map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切换城市之间事件 // onChangeBefore: function(){ // alert('before'); // }, // 切换城市之后事件 // onChangeAfter:function(){ // alert('after'); // }http://localhost:8082/index.jsp })); } var marker = new BMap.Marker(new BMap.Point(114.04254,22.561866)); // 创建点 map.addOverlay(marker); //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 marker.disableDragging();// 不可拖拽 //获取marker的位置 marker.addEventListener("click",getAttr); function getAttr(){ var p = marker.getPosition(); //获取marker的位置 alert("marker的位置是" + p.lng + "," + p.lat); } //创建小狐狸 var pt = new BMap.Point(114.04111,22.561744); var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157)); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注 // 将标注添加到地图中 map.addOverlay(marker2); marker2.hide(); function showYourMarker(){marker2.show();} function hideYourMarker(){marker2.hide();} var marker3 = new BMap.Marker(new BMap.Point(114.04000,22.561600)); // 创建标注 map.addOverlay(marker3); var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)}); marker3.setLabel(label); marker3.hide(); function showOver(){ marker3.show(); } function hideOver(){ marker3.hide(); } // 编写自定义函数,创建标注 function addMarker(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); } // 随机向地图添加10个标注 function addTenRandomMarkers(){ var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 10; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point); } } // 向地图添加10个标注 function addTenMarkers(){ var longS = 114.04554; var latS = 22.561666; for (var i = 0; i < 10; i ++) { var point = new BMap.Point(longS + 0.001*i, latS + 0.0001*i); addMarker(point); } } //设置marker图标为水滴矢量图标 var vectorMarker = new BMap.Marker(new BMap.Point(point.lng,point.lat-0.0003), { // 指定Marker的icon属性为Symbol icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, { scale: 1.2,//图标缩放大小 fillColor: "blue",//填充颜色 fillOpacity: 0.8//填充透明度 }) }); map.addOverlay(vectorMarker); vectorMarker.hide(); function showVectorMarker(){vectorMarker.show();} function hideVectorMarker(){vectorMarker.hide();} vectorMarker.enableDragging();// 可拖拽 //获取marker的位置 vectorMarker.addEventListener("click",getAttr); function getAttr(){ var p = vectorMarker.getPosition(); //获取vectorMarker的位置 alert("vectorMarker的位置是" + p.lng + "," + p.lat); } //步行线路图 var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } }); var start = new BMap.Point(114.038143,22.547901); var end = new BMap.Point(114.053495,22.548226); function addWalking(){ walking.search(start, end);} </script>
常用的一些功能介绍可以看这里:
http://lbsyun.baidu.com/jsdemo.htm
也可以看官方文档很全面，如下：
