更新记录

1.0.1（2025-03-14）

新增内容

• 新增地图缩放事件
• 新增多数属性同时设置接口
• 新增可修改中心图标

  优化内容

• 优化地图拖拽事件回调中心位置
• 优化标注可设置位置偏移
• 优化交互

  1.0.0（2025-03-12）

  首发

平台兼容性

地图组件 ly-map

1 初始化

默认填充父布局

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

2 组件说明

支持参数

支持事件

支持方法

标注Object 格式说明

多属性配置说明

const option = {
    // 中心点
    center: {lon: 116.391231, lat: 39.907334},
    // 多标注
    markers: [
        {icon: icon1, width: 24, height: 27, lon: 116.389231, lat: 39.906034},
    ],
    // 缩放
    zoom: 16,
    // 地图类型
    type: 1,
}

示例代码

完整代码如下

<template>
    <view class="map-page-wrapper">
        <view class="map-box">
            <ly-map ref="map"
                    :map-key="mapKey"
                    :lonlat="lonlat"
                    :zoom="zoom"
                    :show-center-icon="showCenterIcon"
                    :center-icon="centerIcon"
                    :show-location-icon="showLocationIcon"
                    :on-location="location"
                    :on-loaded="loaded"
                    :on-start-drag="startDrag"
                    :on-zoom-end="zoomEnd"
                    :on-end-drag="endDrag"/>
        </view>
        <view class="tool-box">
            <view class="tool" @tap="setType(0)">矢量地图</view>
            <view class="tool" @tap="setType(1)">卫星地图</view>
            <view class="tool" @tap="setMarkers()">设置标注</view>
            <view class="tool" @tap="clearMarkers()">清除标注</view>
            <view class="tool" @tap="setZoom(1)">缩放+</view>
            <view class="tool" @tap="setZoom(-1)">缩放-</view>
            <view class="tool" @tap="setCenter(116.391231,39.907334)">设置位置1</view>
            <view class="tool" @tap="setCenter(111.668097, 40.825417)">设置位置2</view>
            <view class="tool" @tap="setCenterIcon(true)">显示中心图标</view>
            <view class="tool" @tap="setCenterIcon(false)">隐藏中心图标</view>
            <view class="tool" @tap="setLocationIcon(true)">显示定位图标</view>
            <view class="tool" @tap="setLocationIcon(false)">隐藏定位图标</view>
            <view class="tool" @tap="setIcon()">修改中心图标</view>
            <view class="tool" @tap="setOption()">同时设置属性</view>
        </view>
    </view>
</template>
<script>
    import icon1 from '../static/icon1.png';
    import icon2 from '../static/icon2.png';
    import icon3 from '../static/icon3.png';

    export default {
        data() {
            return {
                // 天地图官网地址 https://oauth.tianditu.gov.cn/
                mapKey: "天地图申请的key",
                // 中心位置
                lonlat: [111.668097, 40.825417],
                // 缩放
                zoom: 16,
                // 地图展示类型
                type: 0,
                // 显示中心图标
                showCenterIcon: true,
                // 显示定位图标
                showLocationIcon: true,
                // 不设置使用默认图标
                centerIcon: "",
            };
        },
        onReady() {
            // 绑定组件
            this.map = this.$refs.map;
        },
        methods: {
            location() {
                console.log("点击定位按钮回调");
            },
            loaded() {
                console.log("地图创建完成");
            },
            zoomEnd(lon, lat) {
                console.log("地图缩放完成", lon, lat);
            },
            startDrag(lon, lat) {
                console.log("开始地图拖拽", lon, lat);
            },
            endDrag(lon, lat) {
                console.log("结束地图拖拽", lon, lat);
            },
            setZoom(zoom) {
                this.zoom += zoom;
                if (this.zoom <= 10) this.zoom = 1;
                if (this.zoom >= 20) this.zoom = 20;
                this.map.setZoom(this.zoom);
            },
            setType(type) {
                // type 0矢量地图 1卫星地图 其他矢量地图
                this.type = type;
                this.map.setType(this.type);
            },
            setCenter(lon, lat) {
                this.lonlat = [lon, lat];
                this.map.setCenter(lon, lat);
            },
            setMarkers() {
                this.map.setMarkers([
                    {icon: icon1, width: 24, height: 27, lon: 111.666020, lat: 40.82740},
                    {icon: icon2, width: 24, height: 24, lon: 111.667020, lat: 40.82740},
                    {icon: icon1, width: 24, height: 27, lon: 111.665020, lat: 40.82740},
                    {icon: icon2, width: 24, height: 24, lon: 111.669020, lat: 40.82740},
                    {icon: icon1, width: 24, height: 27, lon: 111.670020, lat: 40.82740},
                ]);
            },
            clearMarkers() {
                this.map.setMarkers([]);
            },
            setCenterIcon(show) {
                this.showCenterIcon = show;
            },
            setLocationIcon(show) {
                this.showLocationIcon = show;
            },
            setIcon() {
                // 默认图标和icon切换显示
                this.centerIcon = this.centerIcon ? "" : icon3;
            },
            setOption() {
                // 同时设置多个属性
                this.map.setOption({
                    center: {lon: 116.391231, lat: 39.907334},
                    markers: [
                        {icon: icon1, width: 24, height: 27, lon: 116.389231, lat: 39.906034},
                        {icon: icon2, width: 24, height: 24, lon: 116.390231, lat: 39.906034},
                        {icon: icon1, width: 24, height: 27, lon: 116.391231, lat: 39.906034},
                        {icon: icon2, width: 24, height: 24, lon: 116.392231, lat: 39.906034},
                        {icon: icon1, width: 24, height: 27, lon: 116.393231, lat: 39.906034},
                        // 带偏移，如不设置默认 offsetX=width/2, offsetY=height
                        {icon: icon3, width: 24, height: 24, lon: 116.391231, lat: 39.906034, offsetX: 12, offsetY: -24}
                    ],
                    zoom: 16,
                    type: 1,
                });
            }
        }
    };
</script>

<style lang="scss">
    .map-page-wrapper {
        width: 100%;
        height: 100vh;

        .map-box {
            width: 100%;
            height: 100%;
        }

        .tool-box {
            position: absolute;
            // 天地图默认z-index:400 需要大于400
            z-index: 999;
            top: 0;
            left: 0;
            width: 100%;
            border-radius: 8rpx;
            padding: 16rpx;
            display: flex;
            flex-wrap: wrap;
            gap: 16rpx;

            .tool {
                font-size: 28rpx;
                border-radius: 8rpx;
                padding: 12rpx 24rpx;
                background: #ffffff;
                box-shadow: 0 0 6rpx rgba(0, 0, 0, .15);
            }
        }
    }
</style>