使用Baidu WebGL地图API创建交互式地图-优快云博客

效果图
在这里插入图片描述
对应的信息属性在代码中以注释的形式展现
希望可以帮到你
<!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,
    #container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  </style>
  <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=HLHV3wfyctGrIUtYDvEL7M1UWjH5dgHT"></script>
  <title>地图展示</title>
</head>

<body>
  <div id="container"></div>
</body>

</html>
<script type="text/javascript">
  var map = new BMapGL.Map("container");          // 创建地图实例 
  var point = new BMapGL.Point(111.717087, 32.767782);  // 创建点坐标 
  map.centerAndZoom(point, 20);   // 初始化地图，设置中心点坐标和地图级别


  // var marker = new BMapGL.Marker(point);        // 创建默认标注   
  // map.addOverlay(marker); // 将标注添加到地图中  
  var myIcon = new BMapGL.Icon("../bm.png", new BMapGL.Size(150, 150), {
    // 指定定位位置。  
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(50, 50),
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
  });
  // 创建标注对象并添加到地图  
  // var marker = new BMapGL.Marker(point, { icon: myIcon });
  // map.addOverlay(marker);
  // marker.addEventListener("click", function () {
  //   alert("不许点");
  // });


  // 创建带高度的点
  var marker3d = new BMapGL.Marker3D(point, 0, {
    size: 50,
    shape: BMAP_SHAPE_CIRCLE,
    fillColor: '#454399',
    fillOpacity: 0.6
  });
  // 将点添加到地图上
  map.addOverlay(marker3d);

  var pt = new BMapGL.Point(point.lng, point.lat);
  // 创建贴图纹理Icon
  var icon = new BMapGL.Icon("../bm.png", new BMapGL.Size(40, 40));
  // 创建带高度的点，这里只需要size和icon
  var marker = new BMapGL.Marker3D(pt, 0, {
    size: 80,
    icon: icon
  });
  // 将点添加到地图上
  map.addOverlay(marker);



  var pStart = new BMapGL.Point(111.727087, 32.757782);
  var pEnd = new BMapGL.Point(111.739097, 32.769792);
  var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat),
    new BMapGL.Point(pEnd.lng, pStart.lat));
  // 创建地面叠加层实例
  var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'image',
    url: '../bm.png',
    opacity: 1
  });
  // 叠加层添加到地图
  map.addOverlay(imgOverlay);



  // map.addEventListener('click', function (e) {
  //   alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
  //   var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
  //   alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
  // });


  // var txtMenuItem = [
  //   {
  //     text: '放大',                             // 定义菜单项的显示文本
  //     callback: function () {                 // 定义菜单项点击触发的回调函数
  //       map.zoomIn();
  //     }
  //   },
  //   {
  //     text: '缩小',
  //     callback: function () {
  //       map.zoomOut();
  //     }
  //   }
  // ];
  // for (var i = 0; i < txtMenuItem.length; i++) {
  //   menu.addItem(new BMapGL.MenuItem(               // 定义菜单项实例
  //     txtMenuItem[i].text,                        // 传入菜单项的显示文本
  //     txtMenuItem[i].callback,                    // 传入菜单项的回调函数
  //     {
  //       width: 300,                             // 指定菜单项的宽度
  //       id: 'menu' + i                          // 指定菜单项dom的id
  //     }
  //   ));
  // }
  // map.addContextMenu(menu);                           // 给地图添加右键菜单








  // var bd = new BMapGL.Boundary();  //创建镂空多边形，并添加到地图上
  // bd.get('顺义区', function (rs) {
  //   // console.log('外轮廓：', rs.boundaries[0])
  //   // console.log('内镂空：', rs.boundaries[1])
  //   var hole = new BMapGL.Polygon(rs.boundaries, {
  //     fillColor: 'blue',
  //     fillOpacity: 0.2
  //   });
  //   map.addOverlay(hole);
  // });


  // var prism = new BMapGL.Prism(path, 0, {  //创建地图参照展示地图
  //   topFillColor: '#5679ea',
  //   topFillOpacity: 0.5,
  //   sideFillColor: '#5679ea',
  //   sideFillOpacity: 0.9
  // });
  // map.addOverlay(prism);


  // var polyline = new BMapGL.Polyline([
  //   new BMapGL.Point(111.717087, 32.767782),
  //   new BMapGL.Point(111.716956, 32.767855),
  //   new BMapGL.Point(111.716726, 32.767635),//画线
  // ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
  // map.addOverlay(polyline);


  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


  // var map = new BMapGL.Map("container", { // 禁止地图旋转和倾斜可以通过配置项进行设置
  //   enableRotate: false, 
  //   enableTilt: false
  // });











  // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

  //控件
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);

  var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
  map.addControl(zoomCtrl);

  var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
  map.addControl(cityCtrl);

  var opts = {
    offset: new BMapGL.Size(80, 25)   //位置
  }
  // 添加控件
  map.addControl(new BMapGL.ScaleControl(opts));
  // 移除控件
  map.removeControl(scaleCtrl);



  var content = "家鸭";  //文字内容
  var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
  })
  map.addOverlay(label);  // 将标注添加到地图中
  label.setStyle({                              // 设置label的样式
    color: '#0ff',
    fontSize: '19',
    padding: '5px',
    fontFamily: "华文彩云",
    border: '2px solid #1E90FF',
  })


  var opts = {
    width: 250,     // 信息窗口宽度
    height: 100,    // 信息窗口高度
    title: "家"  // 信息窗口标题
  }
  var infoWindow = new BMapGL.InfoWindow("这是家啊", opts);  // 创建信息窗口对象
  marker.addEventListener('click', () => {
    map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
  })
  // map.setMapStyleV2({
  //   styleId: 'c3b5619a694704fd141466b7839a50ed' //个性化样式
  // });


</script>