更新记录

1.0.7（2025-04-29） 下载此版本

优化内容

• 修改拖拽结束事件等待惯性结束后触发事件
• 修改缩放事件结束后，返回lon lat zoom

1.0.6（2025-04-29） 下载此版本

bug修复

• 修复方法setOption同时配置 zoom、center时，center不生效问题
• 修复覆盖物infowindow设置offsetX、offsetY无效问题

1.0.5（2025-04-23） 下载此版本

新增内容

• 支持覆盖物点击事件，详情见文档
• 支持启用/禁用地图拖拽、双击缩放、双指缩放、惯性拖拽，详情见文档
• 新增文本覆盖物、信息窗口，详情见文档

平台兼容性

地图组件 ly-map

1 坐标系说明

默认坐标系

天地图为WGS84坐标系，如果当前使用的是百度坐标（BD09）、火星坐标（GCJ02）
则需要转化后使用，推荐使用coord-transform工具转换

转换工具安装

// npm
npm install @isvend/coord-transform

// pnpm
pnpm add @isvend/coord-transform

坐标转换

import {
    transformWGS84ToBD09,
    transformBD09ToGCJ02,
    transformBD09ToWGS84,
    transformGCJ02ToWGS84,
    transformWGS84ToGCJ02,
} from "@isvend/coord-transform";

const lng = 116.404;
const lat = 39.915;

console.log("WGS84 to GCJ02", transformWGS84ToGCJ02(lng, lat));
console.log("GCJ02 to WGS84", transformGCJ02ToWGS84(lng, lat));

console.log("WGS84 to BD09", transformWGS84ToBD09(lng, lat));
console.log("BD09 to WGS84", transformBD09ToWGS84(lng, lat));

console.log("BD09 to GCJ02", transformBD09ToGCJ02(lng, lat));
console.log("GCJ02 to BD09", transformBD09ToGCJ02(lng, lat));

2 初始化

默认填充父布局

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

3 插件说明

属性

事件

覆盖物事件 Event 格式说明

方法

标注 Marker 格式说明

覆盖物 Over格式说明

地图操作禁用配置 Option 格式说明

多属性 Object 配置说明

const option = {
    // 中心点
    center: {lon: 116.391231, lat: 39.907334},
    // 多标注
    markers: [{
        icon: icon,
        width: 24,
        height: 27,
        lon: 116.389231,
        lat: 39.906034,
        offsetX: 12,
        offsetY: 27,
        click: true,  // 开启点击监听
    }],
    // 缩放
    zoom: 16,
    // 地图类型
    type: 1,
    // 覆盖物
    overs: [
        // 添加圆
        {
            type: "circle",
            rad: 100,
            lon: 111.667920,
            lat: 40.828050,
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            fillColor: "#0000FF",
            fillOpacity: .2,
            lineStyle: "solid",
        },
        // 添加折线
        {
            type: "polyline",
            points: [[111.665750, 40.822830], [111.668190, 40.821800], [111.670310, 40.822790]],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加多边形
        {
            type: "polygon",
            points: [[111.668160, 40.824850], [111.666640, 40.823950], [111.669570, 40.823990]],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加矩形
        {
            type: "rect",
            leftTop: [111.665880, 40.826710],
            rightBottom: [111.670120, 40.825860],
            color: "#0000FF",
            weight: 3,
            opacity: .5,
            lineStyle: "solid",
        },
        // 添加文本
        {
            type: "label",
            lon: 111.668150,
            lat: 40.825330,
            text: "点我打开弹窗",
            offsetX: -60,
            offsetY: 10,
            click: true,
        },
    ],
}

注意：目前所有覆盖物都支持click属性，当click=true时，则开启点击监听，默认不开启

4 示例代码

<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"
                    :on-listen="listen"/>
        </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 class="tool" @tap="setOvers()">设置覆盖物</view>
            <view class="tool" @tap="addOvers()">添加覆盖物</view>
            <view class="tool" @tap="clearOvers('rect')">清除矩形覆盖物</view>
            <view class="tool" @tap="clearOvers()">清除所有覆盖物</view>
            <view class="tool" @tap="enable()">启用拖拽/缩放</view>
            <view class="tool" @tap="disable()">禁用拖拽/缩放</view>
            <view class="tool" @tap="openDialog()">打开弹窗</view>
        </view>
    </view>
</template>
<script>
    import icon1 from '@/static/icon1.png';

    export default {
        data() {
            return {
                // 天地图官网地址 https://oauth.tianditu.gov.cn/
                // key需要自行申请，以下使用测试key
                mapKey: "bcd1064810812bdc35d675d1dba3c23f",
                // 中心位置
                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);
            },
            listen(e) {
                console.log("覆盖物点击事件", e);
                // 只有点击label可以显示弹窗
                if (e.target.type === "label") {
                    this.map.setOvers([{
                        type: "infowindow",
                        lon: 111.668100,
                        lat: 40.825420,
                        content: "弹窗",
                    }]);
                }
            },
            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([{
                    lon: 111.666020,
                    lat: 40.82740
                },
                    {
                        lon: 111.667020,
                        lat: 40.82740
                    },
                    {
                        lon: 111.665020,
                        lat: 40.82740
                    },
                    {
                        lon: 111.669020,
                        lat: 40.82740
                    },
                    {
                        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 ? "" : icon1;
            },
            setOption() {
                // 同时设置多个属性
                this.map.setOption({
                    center: {
                        lon: 116.391231,
                        lat: 39.907334
                    },
                    markers: [{
                        lon: 116.389231,
                        lat: 39.906034
                    },
                        {
                            lon: 116.390231,
                            lat: 39.906034
                        },
                        {
                            lon: 116.391231,
                            lat: 39.906034
                        },
                        {
                            lon: 116.392231,
                            lat: 39.906034
                        },
                        {
                            lon: 116.393231,
                            lat: 39.906034
                        },
                    ],
                    zoom: 16,
                    type: 1,
                });
            },
            setOvers() {
                const overs = [{
                    type: "circle",
                    rad: 100,
                    lon: 111.667920,
                    lat: 40.828050,
                    color: "#0000FF",
                    weight: 3,
                    opacity: .5,
                    fillColor: "#0000FF",
                    fillOpacity: .2,
                    lineStyle: "solid",
                    click: true,
                },
                    {
                        type: "polyline",
                        points: [
                            [111.665750, 40.822830],
                            [111.668190, 40.821800],
                            [111.670310, 40.822790]
                        ],
                        color: "#0000FF",
                        weight: 3,
                        opacity: .5,
                        lineStyle: "solid",
                    },
                    {
                        type: "polygon",
                        points: [
                            [111.668160, 40.824850],
                            [111.666640, 40.823950],
                            [111.669570, 40.823990]
                        ],
                        color: "#0000FF",
                        weight: 3,
                        opacity: .5,
                        lineStyle: "solid",
                    },
                    {
                        type: "rect",
                        leftTop: [111.665880, 40.826710],
                        rightBottom: [111.670120, 40.825860],
                        color: "#0000FF",
                        weight: 3,
                        opacity: .5,
                        lineStyle: "solid",
                    },
                    {
                        type: "label",
                        lon: 111.668150,
                        lat: 40.825330,
                        text: "点我打开弹窗",
                        offsetX: -60,
                        offsetY: 10,
                        click: true,
                    },
                ];
                this.map.setOvers(overs);
            },
            addOvers() {
                const overs = [{
                    type: "circle",
                    rad: 200,
                    lon: 111.667920,
                    lat: 40.828050,
                    color: "#0000FF",
                    weight: 3,
                    opacity: .5,
                    fillColor: "#0000FF",
                    fillOpacity: .2,
                    lineStyle: "solid",
                },];
                this.map.addOvers(overs);
            },
            clearOvers(type) {
                this.map.clearOvers(type);
            },
            enable() {
                this.map.setEnable({
                    drag: true,
                    doubleClickZoom: true,
                    inertia: true,
                    pinchToZoom: true,
                });
            },
            disable() {
                this.map.setEnable({
                    drag: false,
                    doubleClickZoom: false,
                    inertia: false,
                    pinchToZoom: false,
                });
            },
            openDialog() {
                const content =
                    `
                    <div style="display:flex; flex-direction: column;align-items: center; font-size:16px;z-index:999999999;">
                        <img src='http://lbs.tianditu.gov.cn/images/logo.png' width='100' height='50'/>
                        <div style='margin-top:8px;'>天地图组件</div>
                        <div style='margin-top:8px;'>内蒙古灵越科技</div>
                    </div>
                `;
                this.map.setOvers([{
                    type: "infowindow",
                    lon: 111.668100,
                    lat: 40.825420,
                    content: content,
                }]);
            }
        }
    };
</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>

5 QA

为什么自定义标注图标在APP上会失效？

标注图标支持网络图片以及base64格式图标