使用百度地图接口绘制地图_百度地图绘制区域接口-优快云博客

本文链接：https://blog.youkuaiyun.com/HouRuoTong/article/details/113734888

这篇博客详细介绍了如何注册并使用百度地图API来创建一个互动式地图。首先，你需要在百度地图API官网注册账号并申请密钥。接着，在HTML文件中引入API并创建地图实例，设置中心点和城市。然后，通过CSS隐藏水印和添加标记，实现地图的个性化。此外，还展示了如何添加信息窗口、批量解析地址和获取行政区域边界。这为开发者提供了一个基础的百度地图应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先需要在百度地图API里注册账号并申请密钥

链接如下
百度地图API
(进入首页后在控制台里注册账号，申请密钥)

二、密钥申请成功后，创建一个html文件

在head里引入如下的代码

//调用百度地图API(一定有)
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的密钥"></script>

注意：src里面的链接不要忘了http:

三、创建地图实例

具体可以参考百度地图API文档

先创建一个div标签

<div id="map"></div>

创建地图实例获取到div的id

// 百度地图API功能
var map = new BMap.Map("map"); // 创建Map实例
map.centerAndZoom("郑州", 5);  // 初始化地图,用城市名设置地图中心点
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件，通俗讲就是地图右上角的三种类型(地图，卫星，三维)
map.setCurrentCity("洛阳");   // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放

去掉水印(百度地图logo)

css样式里添加如下代码

.BMap_cpyCtrl {
      display: none;
}
.anchorBL {
    display: none;
}

完整代码

<!DOCTYPE html>
<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,#map {width: 100%;height: 100%;margin:7;font-family:"微软雅黑";}
 .BMap_cpyCtrl {
      display: none;
  }
  .anchorBL {
      display: none;
  }

 </style>
 <!--调用百度api -->
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的密钥"></script>
 <title>地图展示</title>
</head>
<body>
 <div id="map"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("map"); // 创建Map实例
    map.centerAndZoom("郑州", 5);  // 初始化地图,用城市名设置地图中心点
    // map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity("洛阳");   // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    var point = new BMap.Point(116.404, 39.915);
    var marker = new BMap.Marker(point); // 创建点
    map.addOverlay(marker); //添加点
    map.removeOverlay(marker); //删除点
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    //批量解析
    var adds = ["长沙", "深圳", "香港", "郑州 ", "惠州", "南昌", "赣州", "中山", "阳江", "上海", "无锡", "南京"];
    for (var i = 0; i < adds.length; i++) {
      myGeo.getPoint(adds[i], function (point) {
      if (point) {
        var address = new BMap.Point(point.lng, point.lat);
        var marker = new BMap.Marker(address);
        map.addOverlay(marker);
        var opts = {
        width: 120,  // 信息窗口宽度
        height: 70,  // 信息窗口高度
        title: "信息" // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow("<a href='#' target='blank'>查看详情</a>", opts); // 创建信息窗口对象
        marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow,address); //开启信息窗口
        });
      }
      }, "深圳市");
    }
    getBoundary("中国");
    function getBoundary(sRegion) {
        var bdary = new BMap.Boundary();
        bdary.get(sRegion, function (rs) { //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        for (var i = 0; i < count; i++) {
          var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#4A7300", fillColor: "#FFF8DC" }); //建立多边形覆盖物
          map.addOverlay(ply); //添加覆盖物
        }
      });
    }
</script>