更新记录

1.0.0（2025-03-13）

初步完善功能

平台兼容性

地图组件 ly-map

1 初始化

默认填充父布局

<ly-map ref="map" map-key="天地图key"/>

2 组件说明

支持参数

支持事件

支持方法

标注Object 格式说明

示例代码

完整代码如下

<template>
    <view class="map-page-wrapper">
        <view class="map-box">
            <ly-map ref="map1"
                    map-key="天地图key"
                    :lonlat="[111.668097, 40.825417]"
                    :zoom="16"
                    show-center-icon
                    show-location-icon
                    :on-location="location"
                    :on-loaded="loadMap1"
                    :on-start-drag="startDrag"
                    :on-end-drag="endDrag"/>
        </view>
        <view class="map-box">
            <ly-map ref="map2"
                    map-key="天地图key"
                    show-center-icon
                    show-location-icon
                    :on-location="location"
                    :on-loaded="loadMap2"
                    :on-start-drag="startDrag"
                    :on-end-drag="endDrag"/>
        </view>
    </view>
</template>
<script>
import icon from './icon.png';

export default {
    data() {
        return {
        };
    },
    mounted() {
        // 绑定组件
        this.map1 = this.$refs.map1;
        this.map2 = this.$refs.map2;
    },
    methods: {
        location() {
            console.log("点击定位按钮回调");
        },
        loadMap1() {
            // 设置多个标注
            this.map1.setMarkers([
                {
                    icon: icon,
                    width: 24,
                    height: 27,
                    lon: 111.668020,
                    lat: 40.82540,
                },
                {
                    icon: icon,
                    width: 24,
                    height: 27,
                    lon: 111.667000,
                    lat: 40.8250,
                }
            ]);
            // 设置地图类型
            console.log("地图1创建完成");
        },
        loadMap2() {
            // 重置地图大小
            this.map2.resize();
            // 设置中心位置
            this.map2.setCenter(116.3912314,39.90733450);
            // 设置地图类型 0矢量地图 1卫星地图
            this.map2.setType(1);
            // 设置缩放
            this.map2.setZoom(16);
            // 设置地图类型
            console.log("地图2创建完成");
        },
        startDrag() {
            console.log("开始地图拖拽");
        },
        endDrag() {
            console.log("结束地图拖拽");
        },
    }
};
</script>

<style lang="scss">
.map-page-wrapper {
    width: 100%;
    height: calc(100vh - env(safe-area-inset-bottom));

    .map-box{
        width: 100%;
        height:50%;
    }
}
</style>