百度地图（29）-GL 富文本 richMarker

1. 三维GL库中支持的富文本主要有两种，一种是 InfoBox ,一种是 RichMarker。

2.  通过添加 BMapGLLib 的 引用，支持对这两种对象的调用。

  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js"></script>


  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js"></script>

3. 代码

InfoBox

  var infoBox = new BMapGLLib.InfoBox(map, html.join(""), {
      boxStyle: {
        background: "#6cb2fa",
         "270px",
        height: "300px"
      },
      closeIconMargin: "1px 1px 0 0",
      closeIconUrl: '//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/examples/images/close.png',
      enableAutoPan: true,
      align: INFOBOX_AT_BOTTOM,
      offset: new BMapGL.Size(15, -150)
    });
    var marker = new BMapGL.Marker(poi);
     // map.addOverlay(marker);
    infoBox.open(marker);
    marker.enableDragging();

RichMarker

    var htm1 =
      "<div id='overLay' style='93px;height:116px; background:url(//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back.png) left top no-repeat;position: absolute;'>" +
      "<img style='margin-left:9px;margin-top: 8px;' src='//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/small.jpg' />" +
      "</div>",
      myRichMarker1 = new BMapGLLib.RichMarker(htm1, new BMapGL.Point(116.30816, 40.056863), {
        "anchor": new BMapGL.Size(-47, -116),
        "enableDragging": true
      });
    map.addOverlay(myRichMarker1);

4. 页面显示

5. 源码地址

https://github.com/WhatGIS/bdMap