MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > loadMarker 加载单个标注

loadMarker 加载单个标注

实例：loadMarker(data, markerOption, type, needTrans);

参数说明：

data(Object)：标注数据。具体如下表：

参数描述
id(string)标注id（必填）
lng(number)标注的经度（必填）
lat(number)标注的纬度（必填）
text(string)标注label的文字内容（type为2或3时必填）
description(string)标注的描述
dialogHtml(string)点击标注后的弹窗内容，应为HTML片段

markerOption(Object)：标注的配置对象，包含billboard和label两个属性。

        billboard配置项：http://cesium.xin/cesium/cn/Documentation1.62/BillboardGraphics.html

        label配置项：http://cesium.xin/cesium/cn/Documentation1.62/LabelGraphics.html

type(Number)：标注类型，默认值为1。type取值及代表含义：1. 只加载marker，2. 同时加载marker和label，3.只加载label

needTrans(Boolean)：是否需要GCJ02(高德地图、腾讯地图、谷歌地图等)转换WGS84，默认false

返回值：

Promise对象，loadMarker(markerinfo, markerOption, 1).then((marker) => {...}), marker为添加的marker对象

代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://mhc.ixiera.com/mhc/main.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
        <title>loadMarker</title>
    </head>
    <body>
        <div id="container"></div>
        <script>
            MchCesium.init('container');
            const markerInfo = {
                id: 'marker1',
                text: '生命之洞',
                description: '服务器获取的数据1',
                lng: 104.461479,
                lat: 31.83257,
                dialogHtml:'<p>123456</p>'
            }
            const markerOption = {
                billboard: {
                    image: 'https://mhc.ixiera.com/img/bz.png',
                    width: 30,
                    height: 35,
                },
                label: {
                    font: '20px',
                    pixelOffset: new Cesium.Cartesian2(0, -38)
                }
            }
            MchCesium.loadMarker(markerInfo, markerOption, 2, true).then(marker => {
                MchCesium.viewer.zoomTo(marker)
            })
        </script>
    </body>
</html>

效果展示：

本文档来自—MCHMAP 丨 地图引擎平台