使用百度地图接口绘制地图

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

完整代码


<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>
 
 <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("查看详情", 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>

整体效果展示
使用百度地图接口绘制地图_第1张图片

你可能感兴趣的:(html,js)