浏览器版本低！无法浏览完整内容，建议升级或更换浏览器。

文档全面上新

更科技的视觉体验，更高效的页面结构，快前往体验吧！

体验新版
（以“{{jspopularGL-sidebar}} <div class="h1-title">带高度的点</div><div id="update-time">更新时间：2020年10月22日</div><div class="bluetitle"><div class="ser...”为内容创建页面）
 
 
（未显示1个用户的12个中间版本）
第1行： 第1行：
 
{{jspopularGL-sidebar}}
 
{{jspopularGL-sidebar}}
−
<div class="h1-title">带高度的点</div><div id="update-time">更新时间：2020年10月22日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text">
+
<div class="h1-title">带高度的点</div><div id="update-time1">更新时间：2020年10月22日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">基于 WebGL 点图元，百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo/demo/eMarker3d.htm"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbsyun.baidu.com/jsdemo/demo/eMarker3d.htm 带高度的点]</div><div class="demo_btn" style="width:485px;">[https://lbsyun.baidu.com/jsdemo/demo/eMarker3dIcon.htm 贴纹理]</div></div><div class="jsapi-demo-link">[http://lbsyun.baidu.com/jsdemo.htm#eMarker3d DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>Marker3D类参考</span></div></div></div><div class="serve-explain-text">
−
基于 WebGL 点图元，百度地图JSAPI GL提供了BMapGL.Marker3d类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多需求。
+
构造函数：
−
本节重点介绍一下如何向地图添加标注，以及与地图相关的一些交互。</div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl1_0.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl1_0 DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">提供的覆盖物</div></div><div class="serve-explain-text">
+
−
可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物。
+
 
</div>
 
</div>
 
{| width="519" border="1"
 
{| width="519" border="1"
 
|-
 
|-
−
| width="104" | '''覆盖物'''
+
| width="104" | '''构造函数'''
−
| width="96" | '''类名'''
+
 
| width="297" | '''说明'''
 
| width="297" | '''说明'''
 
|-
 
|-
−
| 抽象基类
+
| BMapGL.Marker3D(point, height, options)
−
| Overlay
+
| Marker3D继承Overlay，用于创建带有高度的点，可以通过options自定义点的样式
−
| 所有的覆盖物均继承此类的方法
+
|}
 +
<div class="serve-explain-text">
 +
参数说明：
 +
</div>
 +
{| width="519" border="1"
 
|-
 
|-
−
| 点
+
| width="104" | '''构造函数'''
−
| Marker
+
| width="90" | '''类型'''
−
| 表示地图上的点，可自定义标注的图标
+
| width="297" | '''说明'''
 
|-
 
|-
−
| 折线
+
| point
−
| Polyline
+
| Point
−
| 表示地图上的折线
+
| 点坐标，通过Point创建的点对象
 
|-
 
|-
−
| 多边形
+
| height
−
| Polygon
+
| number
−
| 表示地图上的多边形
+
| 点的高度
 
|-
 
|-
−
| 圆
+
| options
−
| Circle
+
| Object
−
| 表示地图上的圆
+
| 点的自定义样式，可选
 
|}
 
|}
−
<div class="bluetitle"><div class="services-title-text">添加标注点</div></div><div class="serve-explain-text">
+
<div class="serve-explain-text">
−
Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
+
options属性变量：
−
 
+
</div>
−
API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。
+
{| width="519" border="1"
−
 
+
|-
−
注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。
+
| width="104" | '''options属性'''
−
</div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>参考展示地图创建基本地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>向地图中添加标注</div><div class="devguidecenter">如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：<pre class="prettyprint codestyle">var point = new BMapGL.Point(116.404, 39.915); 
+
| width="90" | '''类型'''
−
var marker = new BMapGL.Marker(point);        // 创建标注 
+
| width="297" | '''说明'''
−
map.addOverlay(marker);                    // 将标注添加到地图中
+
|-
−
</pre>
+
| size
−
</div><div class="devguideorder"><span>3</span>向地图中添加标注</div><div class="devguidecenter">
+
| number
−
定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。
+
| 点的大小，默认为50
−
<pre class="prettyprint codestyle">var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), { 
+
|-
−
    // 指定定位位置。 
+
| shape
−
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上 
+
| number
−
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是 
+
| 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
−
    // 图标中央下端的尖角位置。 
+
|-
−
    anchor: new BMapGL.Size(10, 25), 
+
| fillColor
−
    // 设置图片偏移。 
+
| string
−
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您 
+
| 点的颜色，格式为 '#xxxxxx'，比如'#f00'
−
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。 
+
|-
−
    imageOffset: new BMapGL.Size(0, 0 - 25)  // 设置图片偏移 
+
| fillOpacity
−
});   
+
| number
−
    // 创建标注对象并添加到地图 
+
| 点的透明度，范围0-1，默认0.8
−
var marker = new BMapGL.Marker(point, {icon: myIcon}); 
+
|-
−
map.addOverlay(marker);
+
| icon
−
</pre>
+
| Icon
−
</div><div class="devguideorder"><span>4</span>监听标注事件</div><div class="devguidecenter">
+
| 点的纹理贴图，格式为通过Icon创建的Icon对象
−
JSAPI支持监听覆盖物的事件。
+
|}
−
<pre class="prettyprint codestyle">marker.addEventListener("click", function(){ 
+
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>使用示例</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>创建地图参照展示地图</div><div class="devguidecenter"></div><div class="devguideorder"><span>2</span>创建带高度的点，并添加到地图上</div><div class="devguidecenter">
−
    alert("您点击了标注"); 
+
创建带高度的点使用BMapGL.Marker3D类，其继承自Overlay，通过map.addoverlay()方法将创建的点覆盖物添加到地图上。
−
});
+
<pre class="prettyprint codestyle">   // 创建位置点
−
</pre>
+
    var point = new BMapGL.Point(116.404, 39.915);
−
</div></div><div class="bluetitle"><div class="services-title-text">添加折线</div></div><div class="serve-explain-text">Polyline表示地图上的折线覆盖物，它包含一组点，并将这些点连接起来形成折线。Polyline使用详情请见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html 类参考]</div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>添加折线</div><div class="devguidecenter">首先参考展示地图创建基本地图，之后添加折线覆盖物到地图中。折线覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。<pre class="prettyprint codestyle">var polyline = new BMapGL.Polyline([
+
    // 创建带高度的点
−
new BMapGL.Point(116.399, 39.910),
+
    var marker3d = new BMapGL.Marker3D(point, 8000, {
−
new BMapGL.Point(116.405, 39.920),
+
        size: 50,
−
new BMapGL.Point(116.425, 39.900)
+
        shape: BMAP_SHAPE_CIRCLE,
−
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
+
        fillColor: '#454399',
−
map.addOverlay(polyline);
+
        fillOpacity: 0.6
 +
    });
 +
    // 将点添加到地图上
 +
    map.addOverlay(marker3d);
 
</pre>
 
</pre>
−
</div></div><div class="bluetitle"><div class="services-title-text">添加多边形</div></div><div class="serve-explain-text">Polygon表示地图上的多边形覆盖物，它包含一组点。多边形将这组点按顺序首尾相连，最终围成一个封闭图形。</div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>添加多边形</div><div class="devguidecenter">首先参考展示地图创建基本地图，之后添加多边形覆盖物到地图中。多边形覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。<pre class="prettyprint codestyle">var polygon = new BMapGL.Polygon([
+
</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>纹理贴图</span></div></div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>贴纹理</div><div class="devguidecenter">纹理图片首先需要通过Icon类创建实例，然后通过Marker3D类创建带高度的点实例时，将得到的Icon实例传给icon属性。<pre class="prettyprint codestyle">   // 创建位置点
−
        new BMapGL.Point(116.387112,39.920977),
+
    var pt = new BMapGL.Point(point.lng, point.lat);
−
        new BMapGL.Point(116.385243,39.913063),
+
    // 创建贴图纹理Icon
−
        new BMapGL.Point(116.394226,39.917988),
+
    var icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));
−
        new BMapGL.Point(116.401772,39.921364),
+
    // 创建带高度的点，这里只需要size和icon
−
         new BMapGL.Point(116.41248,39.927893)
+
    var marker = new BMapGL.Marker3D(pt, 8000, {
−
     ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
+
         size: 80,
−
map.addOverlay(polygon);
+
        icon: icon
 +
     });
 +
    // 将点添加到地图上
 +
    map.addOverlay(marker);
 
</pre>
 
</pre>
 
</div></div>
 
</div></div>

2022年8月19日 (五) 13:25的最后版本

带高度的点
更新时间：2020年10月22日
简介
基于 WebGL 点图元，百度地图 JSAPI GL 提供了 BMapGL.Marker3D 类进行带高度的点覆盖物绘制，支持对覆盖物点的高度、大小、形状、颜色及透明度的自定义，并可以进行纹理贴图以满足更多场景需求。
带高度的点
贴纹理
DEMO详情
Marker3D类参考

构造函数：

构造函数 说明
BMapGL.Marker3D(point, height, options) Marker3D继承Overlay，用于创建带有高度的点，可以通过options自定义点的样式

参数说明：

构造函数 类型 说明
point Point 点坐标，通过Point创建的点对象
height number 点的高度
options Object 点的自定义样式，可选

options属性变量：

options属性 类型 说明
size number 点的大小，默认为50
shape number 点的形状，1 为圆形，2 为正方形，默认为 1。也可以使用对应的常量 BMAP_SHAPE_CIRCLE 和 BMAP_SHAPE_RECT
fillColor string 点的颜色，格式为 '#xxxxxx'，比如'#f00'
fillOpacity number 点的透明度，范围0-1，默认0.8
icon Icon 点的纹理贴图，格式为通过Icon创建的Icon对象
使用示例
1创建地图参照展示地图
2创建带高度的点，并添加到地图上

创建带高度的点使用BMapGL.Marker3D类，其继承自Overlay，通过map.addoverlay()方法将创建的点覆盖物添加到地图上。 

    // 创建位置点
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建带高度的点
    var marker3d = new BMapGL.Marker3D(point, 8000, {
        size: 50,
        shape: BMAP_SHAPE_CIRCLE,
        fillColor: '#454399',
        fillOpacity: 0.6
    });
    // 将点添加到地图上
    map.addOverlay(marker3d);
纹理贴图
1贴纹理
纹理图片首先需要通过Icon类创建实例，然后通过Marker3D类创建带高度的点实例时，将得到的Icon实例传给icon属性。
    // 创建位置点
    var pt = new BMapGL.Point(point.lng, point.lat);
    // 创建贴图纹理Icon
    var icon = new BMapGL.Icon(citys[i].img, new BMapGL.Size(40, 40));
    // 创建带高度的点，这里只需要size和icon
    var marker = new BMapGL.Marker3D(pt, 8000, {
        size: 80,
        icon: icon
    });
    // 将点添加到地图上
    map.addOverlay(marker);
取自“http://lbsyun.baidu.com/index.php?title=Marker3d&oldid=17577”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误，或对此文档有更好的建议，请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消