位置选择组件

位置选择组件基于天地图API，提供地图交互式位置选择功能。用户可以通过点击地图、搜索地点或获取当前位置来选择位置，支持经纬度坐标和地址信息的双向绑定。

注意

该组件需依赖天地图 API，请先注册天地图账号并创建 Token 后使用。官方网站

基础使用

获取地图实例

通过注入的 api.el 方法可以获取地图组件实例，进行地图操作：

function getMapInstance($inject) {
    const mapPicker = $inject.api.el('ref_map_picker_001');
    const map = mapPicker.getMap();
    console.log('地图实例:', map);
}

将 ref_map_picker_001 替换为您的位置选择组件的ID。通过 getMap() 方法可以获取天地图实例，进行更高级的地图操作。

设置地图中心点

可以通过组件方法动态设置地图的中心位置：

function setMapCenter($inject, lng, lat) {
    const mapPicker = $inject.api.el('ref_map_picker_001');
    mapPicker.setCenter(lng, lat);
}

设置地图缩放级别

可以动态调整地图的缩放级别：

function setMapZoom($inject, zoom) {
    const mapPicker = $inject.api.el('ref_map_picker_001');
    mapPicker.setZoom(zoom);
}

配置项

位置选择组件提供了丰富的配置选项，您可以通过在设计器中配置属性来自定义组件的行为和外观。

属性名	类型	默认值	必需	说明
modelValue	Object	{}	否	双向绑定的位置数据
apiKey	String	-	否	天地图API密钥
zoom	Number	12	否	地图初始缩放级别
placeholder	String	'请选择位置'	否	输入框占位符文本
disabled	Boolean	false	否	是否禁用组件

事件

位置选择组件提供了丰富的事件，方便您监听位置变化并执行相应的处理。

事件名	参数	说明
update:modelValue	value	位置数据更新事件，当选择位置时触发
change	value	位置数据变化事件，与update:modelValue类似
loaded	map	地图加载完成事件，当地图初始化完成时触发

事件使用示例

监听位置选择：

function handleLocationChange(value) {
    console.log('选择的位置:', value);
    console.log('经纬度:', value.lng, value.lat);
    console.log('地址名称:', value.name);
    // 处理位置数据
    // processLocationData(value);
}

监听地图加载完成：

function handleMapLoaded(map) {
    console.log('地图加载完成:', map);
    // 可以在地图加载完成后进行自定义操作
    // map.setZoom(15);
}

方法

位置选择组件提供了多种方法，方便您进行程序化控制。

方法名	参数	说明	返回值
getMap	-	获取地图实例	Object
setCenter	lng, lat	设置地图中心点	-
setZoom	zoom	设置地图缩放级别	-

方法使用示例

获取地图实例进行高级操作：

function performAdvancedMapOperations($inject) {
    const mapPicker = $inject.api.el('ref_map_picker_001');
    const map = mapPicker.getMap();

    if (map) {
        // 添加自定义标记
        // const marker = new T.Marker(new T.LngLat(116.40769, 39.89945));
        // map.addOverLay(marker);

        // 设置地图样式
        // map.setMapType(T.MAP_TYPE.SATELLITE);

        console.log('地图操作完成');
    }
}

程序化设置地图位置：

function setMapLocation($inject, lng, lat, zoom = 15) {
    const mapPicker = $inject.api.el('ref_map_picker_001');
    mapPicker.setCenter(lng, lat);
    mapPicker.setZoom(zoom);
}

数据格式

位置选择组件的数据格式如下：

{
    lng: 116.40769,    // 经度
    lat: 39.89945,     // 纬度  
    name: "北京市朝阳区" // 地址名称
}

数据说明：

• lng：经度坐标，数值类型，保留6位小数
• lat：纬度坐标，数值类型，保留6位小数
• name：地址名称，字符串类型，通过逆地理编码获取