一、首先需要在百度地图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>

整体效果展示
在这里插入图片描述

# html
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区