生成一个用百度地图js api编写的demo，demo展示百度地图绘制多边形的能力

时间: 2023-05-27 19:05:12 浏览: 94

百度地图JS api Demo

3星 · 编辑精心推荐

**百度地图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的使用规范，以确保服务的稳定性和用户体验。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图绘制多边形示例</title> <style type="text/css"> html,body,#map{height:100%;margin:0;font-family:"微软雅黑";} #toolbar{position:absolute;top:10px;left:10px;z-index:9999;} #polygonList{position:absolute;top:50px;left:10px;z-index:9999;} #polygonList ul{list-style:none;margin:0;padding:0;} #polygonList li{margin-bottom:10px;} </style> </head> <body> <div id="map"></div> <div id="toolbar"> <button onclick="startDrawPolygon()">开始绘制多边形</button> <button onclick="endDrawPolygon()">结束绘制多边形</button> <button onclick="clearMap()">清除地图上的多边形</button> </div> <div id="polygonList"> <ul></ul> </div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("map"); var points = []; // 多边形的点数组 var polygons = []; // 地图上的多边形数组 var polygonNames = []; // 多边形名称数组 var polygonIndex = 0; // 多边形的编号 var polygonList = document.getElementById("polygonList").getElementsByTagName("ul")[0]; // 多边形列表 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别 // 启用滚轮缩放 map.enableScrollWheelZoom(true); // 添加地图点击事件 map.addEventListener("click", function (e) { if (points.length == 0) { alert("请先开始绘制多边形！"); return; } points.push(e.point); // 将点击的点加入点数组 var polyline = new BMap.Polyline(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); // 创建折线 map.addOverlay(polyline); // 将折线添加到地图上 }); // 开始绘制多边形 function startDrawPolygon() { if (points.length != 0) { alert("请先结束绘制多边形！"); return; } var polygonName = "多边形" + (++polygonIndex); // 生成多边形名称 polygonNames.push(polygonName); // 将多边形名称加入名称数组 var polygonListItem = document.createElement("li"); // 创建多边形列表项 polygonListItem.innerHTML = polygonName; // 设置多边形列表项的文本内容 polygonListItem.onclick = function () { var index = polygonNames.indexOf(this.innerHTML); // 获取多边形的编号 map.setViewport(polygons[index].getPath()); // 设置地图视野显示该多边形 }; polygonList.appendChild(polygonListItem); // 将多边形列表项添加到多边形列表上 } // 结束绘制多边形 function endDrawPolygon() { if (points.length == 0) { alert("请先开始绘制多边形！"); return; } var polygon = new BMap.Polygon(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.1}); // 创建多边形 map.addOverlay(polygon); // 将多边形添加到地图上 polygons.push(polygon); // 将多边形添加到多边形数组中 points = []; // 清空点数组 } // 清除地图上的多边形 function clearMap() { map.clearOverlays(); // 清除地图上所有的覆盖物 points = []; // 清空点数组 polygons = []; // 清空多边形数组 polygonNames = []; // 清空多边形名称数组 polygonIndex = 0; // 重置多边形的编号 polygonList.innerHTML = ""; // 清空多边形列表 } </script> </body> </html>

阅读全文

生成一个用百度地图js api编写的demo，demo展示百度地图绘制多边形的能力

相关推荐

百度地图鼠标画圆、画多边形DEMO

百度地图js api demo大全

百度地图api绘制路多边形demo

帮我生成个使用百度地图js api的demo，demo中可以手动划区域，生成对应的polygon，生成的polygon的坐标点保存在一个名为polygon_list的数组中，这个数组可以供后面使用

帮我生成个使用百度地图js api的demo，demo需要显示地图，地图中心点为西安市，demo中可以手动划区域，生成对应的polygon，生成的polygon的坐标点保存在一个名为polygon_list的数组中，这个数组可以供后面使用

用百度地图的js api，输出一个可以在页面手动画多边形的demo，输出的多边形的点以polygon_list的变量保存在js内，待后续使用

高德地图 轨迹围栏管理 demo

vue 实现ArcGIS API For JavaScript3.X版本 使用 QueryTask 实现绘制多边形查询 并将查询结果以表格形式返回

vue、konva标注多边形、矩形---demo2.0

我需要一个可以在cesium上可以随意绘制多边形，并且显示绘制出来的多边形的等值面的一个完整的deom代码

leaflet绘制多边形

pgl22g的demo

高德地图实现电子围栏

Windows程序编程GDI在一个圆上均匀地平分12个点，并将这些点相互连线

cv2.polylines函数用法

yolov5撞线计数

pygame.draw.lines

cesium地形挖空

调用百度地图API的demo

最新推荐

C# 使用GDI绘制雷达图的实例

Google_Map_API谷歌地图.ppt

Android Opengles 开发入门技术文档

动态加载概述与原理.docx

LOL_params_0900000.pt

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

高德地图轨迹围栏管理 demo

vue 实现ArcGIS API For JavaScript3.X版本使用 QueryTask 实现绘制多边形查询并将查询结果以表格形式返回