百度地图显示标记点

场景描述

在地图上显示标记点，点击标记点弹出小窗口，如下图所示

实现思路

使用市场中的百度地图组件，显示标记点，点击标记点弹出窗口

实现步骤

1 从市场下载百度地图组件

在页面设计区，点击+按钮，弹出市场组件对话框，选择百度地图组件，点引用按钮，再点确定按钮，从市场上下载百度地图组件。

2 在百度地图上显示标记点

下载的百度地图组件在高级页签中，将百度地图组件添加到页面上。地图组件自带一个数据集——地图数据，将标记点信息写入这个地图数据，地图上就能显示出这些标记点

地图数据显示标记点时，使用下面这几列，其中type等于market

例如我们要在地图上显示车辆标记点，每辆车需要有经度、纬度信息，参考下面的数据集车辆信息

车辆信息如下

将车辆信息数据集添加到页面中，在数据集的刷新后事件中，获得数据并写入地图数据，代码如下

onCarDataAfterRefresh(event){
    let carData = this.comp("carData");
    let mapData = this.comp("tableCustomData0");
    let jsonArray = [];
    carData.each((option)=>{
        let json = {
            "id":option.row.fid,
            "type":"marker",
            "lng":option.row.lng,
            "lat":option.row.lat,
            "title":option.row.master,
            "icon":this.getUIUrl("$UI/pcx/images/"+(option.row.model=="小客车"?"orange.png":"green.png"))
        };
        jsonArray.push(json);
    })
    mapData.newData({defaultValues:jsonArray});
}

其中icon中使用的图片，是在素材库中上传的图片

3 点击标记点显示窗口

在地图组件上，点击添加自定义区域按钮，设计弹出窗口

在页面上添加一个标记点数据，用来记录当前标记点的经纬度，控制弹出窗口的显示位置，注意自动模式设置为自动新增。

给自定义区域设置经纬和纬度，分别指向标记点数据的经度和纬度

在自定义区域中可以先放一个区块，设置宽度背景色及透明度。在区块中再添加其他显示组件。

显示的信息绑定车辆信息数据集

在地图组件的单击点标注事件中，通过event参数可以获取到单击的标记点在地图数据中对应的记录，例如：经纬度、id等。将经纬度写入标记点数据，弹出窗口就有了显示的经纬度。id来自车辆信息数据，通过to方法将id那条记录设置为车辆信息数据集的当前行，这样绑定车辆信息的数据就能显示id那条记录中的数据了。

onBMapGL0OnMarkerClick(event){
    let marketData = this.comp("marketData");
    marketData.setValue("lng",event.data.item.lng);
    marketData.setValue("lat",event.data.item.lat);

    let carData = this.comp("carData");
    carData.to(event.data.item.id);
}

4 其他设置

地图还提供中心经纬度、默认缩放级别和密钥的设置。