【免费】百度地图JSapiDemo资源-CSDN文库

共1个文件

html：1个

3星 · 超过75%的资源需积分: 0 156 浏览量更新于2017-06-16 3 收藏 1KB ZIP 举报

**百度地图JS API Demo详解** 在现代Web应用中，地图服务已经成为不可或缺的一部分，尤其是在交通、旅游、房地产等领域。百度地图JavaScript API（Application Programming Interface）提供了一套完整的接口，允许开发者在网页上集成百度地图功能，实现自定义的地图展示、定位、路径规划等功能。下面我们将深入探讨如何使用这个API，通过提供的`baiduMapDemo.html`文件，来学习其基本用法和常见功能。引入百度地图JS API库。在HTML文件中，我们通常会在`<head>`标签内添加一个`<script>`标签，指向百度地图的CDN地址，如下所示： ```html <script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> ``` 这里的`ak`是开发者在百度地图开放平台注册后获取的密钥，用于验证请求合法性，确保服务的安全性。接下来，创建地图容器并初始化。在HTML中，我们需要有一个`div`元素作为地图的显示区域，然后在JavaScript中使用`BMap.Map`类创建地图实例，并设置地图中心点和缩放级别： ```javascript var map = new BMap.Map("container"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 初始化地图，设置中心点坐标和地图级别 ``` 地图上的标记（Marker）和信息窗口（InfoWindow）也是常用的功能。我们可以使用`BMap.Marker`创建标记，`BMap.InfoWindow`创建信息窗口，如下所示： ```javascript var point = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var infoWindow = new BMap.InfoWindow("这是个信息窗口"); // 创建信息窗口对象 marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); // 打开信息窗口 }); ``` 除了标记，还有线型图层（Polyline）、多边形图层（Polygon）和圆（Circle）等对象，可以用来绘制路线、区域或范围。例如，绘制一条线段： ```javascript var myPoint1 = new BMap.Point(116.404, 39.915); var myPoint2 = new BMap.Point(116.407, 39.913); var myLine = new BMap.Polyline([myPoint1, myPoint2], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(myLine); // 添加到地图 ``` 路径规划是百度地图API的另一个重要功能，包括驾车、公交和步行规划。通过`BMap.DrivingRoute`、`BMap.TransitRoute`和`BMap.WalkingRoute`类，可以实现起点到终点的路径查询和显示： ```javascript var driving = new BMap.DrivingRoute(map, { renderOptions: {map: map, panel: "drivingPanel"} // 在地图上和指定面板上显示 }); driving.search(new BMap.Point(116.404, 39.915), new BMap.Point(116.407, 39.913)); // 查询驾车路线 ``` 此外，百度地图API还支持地理编码（将地址转换为坐标，反之亦然）、定位（获取用户当前位置）、事件监听等高级功能。通过灵活组合这些功能，开发者可以构建出各种复杂的应用场景。 `baiduMapDemo.html`中的示例展示了百度地图JavaScript API的基本用法，包括地图初始化、标记、信息窗口、线型图层以及路径规划。通过对这个示例的学习，开发者可以快速掌握API的使用，并进一步探索更丰富的地图服务功能。在实际开发中，记得根据项目需求选择合适的功能，优化性能，同时遵循百度地图API的使用规范，以确保服务的稳定性和用户体验。

收起资源包目录

baiduMapDemo.zip （1个子文件）

baiduMapDemo.html 2KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #allmap { width: 600px; height: 600px; margin: 10% auto; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6sTW7caOLIASGhHIbl000mTG1CPHENTD"></script> <title>地图展示</title> </head> <body> <a href="http://blog.csdn.net/wx11408115/article/details/73230059" target="_blank"> 百度地图 demo 博文</a> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 初始化地图,设置中心点坐标和地图级别(貌似是1~16)，数字越大，地图比例越小 map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的 //若想定位到自己想定的位置，打开以下网址，找到自己的位置，抓取坐标就可以了 //http://api.map.baidu.com/lbsapi/getpoint/index.html 百度地图拾取坐标系统 //开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); //创建平移缩放控件 var navigationControl = new BMap.NavigationControl(); map.addControl(navigationControl);//添加到地图 //这里创建比例尺控件 var scaleControl = new BMap.ScaleControl(); map.addControl(scaleControl);//添加到地图 //创建缩略图控件 var overviewMapControl = new BMap.OverviewMapControl();//创建缩略图控件，注意这个控件默认是在地图右下角，并且是缩着的 map.addControl(overviewMapControl);//添加到地图 </script>