百度地图3 从0开始

发布于：2023-01-16 ⋅ 阅读:(388) ⋅ 点赞:(0)

本节主要讲解：

  • 绘制图标

  • 绘制线段

  • 绘制文本

  • 绘制弹窗

案例一：绘制图标：

主要通过添加Icon图标，marker图像标注和添加覆盖物方法addOverlay实现

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
​
      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
​
      .anchorBL {
        display: none;
      }
​
      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(121.66805, 31.14794);
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom();
    map.setHeading(30);
    map.setTilt(60);
​
    map.setMapStyleV2({
      styleId: "50ff73b420f20b44e509803b1d162561",
      //styleJson:json样式文件
    });
​
    //添加覆盖物图标
    const myIcon = new BMapGL.Icon("https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png", new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(0, 0),
      imageOffset: new BMapGL.Size(0, 0),
    });
​
    //添加标注
    const marker = new BMapGL.Marker(point, { icon: myIcon });
​
    //添加覆盖物
    map.addOverlay(marker);
  </script>
</html>
​

最终效果如下：

案例二：绘制折线

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
​
      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
​
      .anchorBL {
        display: none;
      }
​
      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(121.66805, 31.14794);
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom();
    map.setHeading(30);
    map.setTilt(60);
​
    //map.setMapStyleV2({
    //styleId: "50ff73b420f20b44e509803b1d162561",
    //styleJson:json样式文件
    //});
​
    //添加覆盖物图标
    const myIcon = new BMapGL.Icon("https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png", new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(0, 0),
      imageOffset: new BMapGL.Size(0, 0),
    });
​
    //添加标注
    const marker = new BMapGL.Marker(point, { icon: myIcon });
​
    //添加覆盖物
    map.addOverlay(marker);
​
    //绘制折线
    const polyline = new BMapGL.Polyline([new BMapGL.Point(121.66, 31.14), new BMapGL.Point(121.76, 31.24), new BMapGL.Point(120.66, 32.14)], {
      strokeColor: "red",
      strokeWeight: 10,
      strokeOpacity: 0.3,
    });
​
    map.addOverlay(polyline);
  </script>
</html>
​

绘制折线案例效果如下：

案例一：绘制多边形案例：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
​
      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
​
      .anchorBL {
        display: none;
      }
​
      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(121.66805, 31.14794);
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom();
    map.setHeading(30);
    map.setTilt(60);
​
    //map.setMapStyleV2({
    //styleId: "50ff73b420f20b44e509803b1d162561",
    //styleJson:json样式文件
    //});
​
    //添加覆盖物图标
    const myIcon = new BMapGL.Icon("https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png", new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(0, 0),
      imageOffset: new BMapGL.Size(0, 0),
    });
​
    //添加标注
    const marker = new BMapGL.Marker(point, { icon: myIcon });
​
    //添加覆盖物
    map.addOverlay(marker);
​
    //绘制折线
    // const polyline = new BMapGL.Polyline([new BMapGL.Point(121.66, 31.14), new BMapGL.Point(121.76, 31.24), new BMapGL.Point(120.66, 32.14)], {
    //   strokeColor: "red",
    //   strokeWeight: 10,
    //   strokeOpacity: 0.3,
    // });
​
    const polygon = new BMapGL.Polygon([new BMapGL.Point(121.66, 31.14), new BMapGL.Point(121.76, 31.24), new BMapGL.Point(120.66, 32.14)], {
      strokeColor: "red",
      strokeWeight: 10,
      fillColor: "blue",
      //  strokeOpacity: 0.2,
    });
​
    map.addOverlay(polygon);
  </script>
</html>
​

案例一效果如下：

案例二：添加文本

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
​
      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
​
      .anchorBL {
        display: none;
      }
​
      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(121.66805, 31.14794);
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom();
    map.setHeading(30);
    map.setTilt(60);
​
    //map.setMapStyleV2({
    //styleId: "50ff73b420f20b44e509803b1d162561",
    //styleJson:json样式文件
    //});
​
    //添加覆盖物图标
    const myIcon = new BMapGL.Icon("https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png", new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(0, 0),
      imageOffset: new BMapGL.Size(0, 0),
    });
​
    //添加标注
    const marker = new BMapGL.Marker(point, { icon: myIcon });
​
    //添加覆盖物
    map.addOverlay(marker);
​
    //绘制折线
    // const polyline = new BMapGL.Polyline([new BMapGL.Point(121.66, 31.14), new BMapGL.Point(121.76, 31.24), new BMapGL.Point(120.66, 32.14)], {
    //   strokeColor: "red",
    //   strokeWeight: 10,
    //   strokeOpacity: 0.3,
    // });
​
    const polygon = new BMapGL.Polygon([new BMapGL.Point(121.66, 31.14), new BMapGL.Point(121.76, 31.24), new BMapGL.Point(120.66, 32.14)], {
      strokeColor: "red",
      strokeWeight: 10,
      fillColor: "blue",
      //  strokeOpacity: 0.2,
    });
​
    map.addOverlay(polygon);
​
    const txt = new BMapGL.Label("欢迎学习数据可视化课程", {
      position: point,
      offset: new BMapGL.Size(-10, 32),
    });
​
    txt.setStyle({
      width: "160px",
      height: "50px",
      //  backgroundColor: "#0f0",
      textAlign: "center",
      lineHeight: "50px",
      border: "none",
    });
    map.addOverlay(txt);
  </script>
</html>
​

案例二效果如下：

案例三代码如下：

可以给覆盖物绑定事件，从而打开信息窗口，比用浏览器自带的alert体验好一些，这里主要用到了InfoWindow类和map的opendInfoWindow方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
​
      #map {
        width: 1200px;
        height: 550px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
​
      .anchorBL {
        display: none;
      }
​
      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(121.66805, 31.14794);
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom();
    map.setHeading(30);
    map.setTilt(60);
​
    //添加覆盖物图标
    const myIcon = new BMapGL.Icon("https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png", new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(0, 0),
      imageOffset: new BMapGL.Size(0, 0),
    });
​
    //添加标注
    const marker = new BMapGL.Marker(point, { icon: myIcon });
​
    marker.addEventListener("click", function () {
      //配置信息窗口内容和配置选项
      const infowindow = new BMapGL.InfoWindow("欢迎学习数据可视经体系课", {
        width: 250,
        height: 100,
        title: "说明",
        offset: new BMapGL.Size(0, 0),
      });
    
      //打开信息窗口
      map.openInfoWindow(infowindow, point);
    });
​
    //添加覆盖物
    map.addOverlay(marker);
  </script>
</html>
​

上面只是给InfoWindow传了一个普通字符串，也可以传html标签或图片字符串，将上面部分代码替换如下所示：

    //添加标注
    const marker = new BMapGL.Marker(point, { icon: myIcon });
​
    let content = `
                  <div style='color:#f00'>欢迎学习数据可视化体系课</div>
                  <div style='color:green'>为企业赋能</div>
                  <img style='width:80px' src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" />
                `;
​
    marker.addEventListener("click", function () {
      const infowindow = new BMapGL.InfoWindow(content, {
        width: 250,
        height: 100,
        title: "说明",
        offset: new BMapGL.Size(0, 0),
      });
​
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布