当前位置：首页 > news >正文

百度 API 教程 006:使用BMapGL.Marker3D绘制带高度的点纹理贴图

news 来源：原创 2025/6/9 0:31:39

07、带高度的点纹理贴图

在百度地图的 BMapGL API 中，除了可以使用 Marker3D 绘制带有高度的点标记外，你还可以为这些标记添加 纹理贴纸（例如图像或自定义图标）。这样可以使标记更加生动，适用于如建筑物、标志性位置等有具体图形表示的场景。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>带高度的点纹理贴图</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    body,
    html,
    #container {
      overflow: hidden;
      width: 100%;
      height: 90%;
      margin: 0;
      font-family: "微软雅黑",serif;
    }
  </style>
  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4LNKXPO0VCgfpZstdvYkRozvWh6JFEgQ"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
  const map = new BMapGL.Map('container');
  const point = new BMapGL.Point(116.443, 39.935);
  map.centerAndZoom(point, 13);
  map.enableScrollWheelZoom();
  map.setTilt(70);

  const citys = [{
    name: '北京大学',
    img: '/jsdemo/img/beida.png'
  }, {
    name: '北京交通大学',
    img: '/jsdemo/img/beijiao.png'
  }, {
    name: '北京工业大学',
    img: '/jsdemo/img/beigong.png'
  }, {
    name: '北京邮电大学',
    img: '/jsdemo/img/beiyou.png'
  }];

  const cityGeo = new BMapGL.Geocoder();
  for (let i = 0; i < citys.length; i++) {
    cityGeo.getPoint(citys[i].name, function (point) { // 地址解析获取对应经纬度
      const pt = new BMapGL.Point(point.lng, point.lat);
      const icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));
      const marker = new BMapGL.Marker3D(pt, Math.round(Math.random()) * 6000, {
        size: 80,
        icon: icon
      });
      map.addOverlay(marker);
    });
  }
</script>