更新记录

1.0.1（2024-11-19）

  1. 支持地图地图切换；
  2. 支持自定义图标；
  3. 支持呼吸点图标；
  4. 弹跳点图标；

1.0.0（2024-11-04）

taoxiang-leaflet-map-app

版本：v1.0.0

  1. 支持地图底图切换，当前支持天地图矢量图、天地图卫星图、高德矢量图、高德卫星图、腾讯矢量图、腾讯卫星图； 
    
initMap() {
map2d.initMap('map', {
    center: this.center,
    zoom: this.zoom,
    minZoom: this.minZoom,
    maxZoom: this.maxZoom,
    attributionControl: this.attributionControl,
    zoomControl: this.zoomControl,
    doubleClickZoom: this.doubleClickZoom,
    dragging: this.dragging,
    baseLayerType: this.baseLayerType
});
}

地图底图类型可选 天地图矢量图: 'TianDiTu.Normal', 天地图卫星图: 'TianDiTu.Satellite', 高德矢量图: 'GaoDe.Normal', 高德卫星图: 'GaoDe.Satellite', 腾讯矢量图: 'Tencent.Normal', 腾讯卫星图: 'Tencent.Satellite'

2. 支持图标加载，图标可配置图片，可旋转角度，可设置大小；

this.createMarkerLayer({ position:[31, 110], src:'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png', width:50, height:82, id:'test1' })

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue √ √ √ √ × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × √ × √ √ √ √ √

taoxiang-leaflet-map-app

版本：v1.0.0

  1. 支持地图底图切换，当前支持天地图矢量图、天地图卫星图、高德矢量图、高德卫星图、腾讯矢量图、腾讯卫星图； 地图底图类型可选： 天地图矢量图: 'TianDiTu.Normal', 天地图卫星图: 'TianDiTu.Satellite', 高德矢量图: 'GaoDe.Normal', 高德卫星图: 'GaoDe.Satellite', 腾讯矢量图: 'Tencent.Normal', 腾讯卫星图: 'Tencent.Satellite'
<template>
    <view class="content">
        <MapView ref='mapRef' :center='center' :zoom='zoom' :minZoom='minZoom' :maxZoom='maxZoom'
            :attributionControl='attributionControl' :zoomControl='zoomControl' :doubleClickZoom='doubleClickZoom'
            :dragging='dragging' :baseLayerType='baseLayerType'></MapView>

        <button class='btn' style='left:50px;' @click='loadBaseLayer'>切换地图</button>
    </view>
</template>

<script>
    import MapView from '@/uni_modules/taoxiang-leaflet-map-app/components/taoxiang-leaflet-map-app/taoxiang-leaflet-map-app.vue'
    export default {
        components: {
            MapView
        },
        data() {
            return {
                center: [31.164467, 118.187687],
                zoom: 16,
                minZoom: 1,
                maxZoom: 18,
                attributionControl: false,
                zoomControl: true,
                doubleClickZoom: false,
                dragging: true,
                baseLayerType: 'Tencent.Satellite'
            }
        },
        mounted() {},
        onLoad() {},
        methods: {
            loadBaseLayer() {
                this.baseLayerType = 'Tencent.Normal';
            }
        }
    }
</script>

<style>
    .content {
        width: 100vw;
        height: 100vh;
        padding: 0px;
        margin: 0px;
    }

    .btn {
        position: absolute;
        top: 20px;
        z-index: 100000;
    }
</style>
  1. 自定义图标加载
<template>
    <view class="content">
        <MapView ref='mapRef' :center='center' :zoom='zoom' :minZoom='minZoom' :maxZoom='maxZoom'
            :attributionControl='attributionControl' :zoomControl='zoomControl' :doubleClickZoom='doubleClickZoom'
            :dragging='dragging' :baseLayerType='baseLayerType' :markerConfig='markerConfig'></MapView>
        <button class='btn' style='left:50px;' @click='loadMarker'>loadMarker</button>

    </view>
</template>

<script>
    import MapView from '@/uni_modules/taoxiang-leaflet-map-app/components/taoxiang-leaflet-map-app/taoxiang-leaflet-map-app.vue'
    export default {
        components: {
            MapView
        },
        data() {
            return {
                center: [39.9065471221135, 116.40528947499452],
                zoom: 16,
                minZoom: 1,
                maxZoom: 18,
                attributionControl: false,
                zoomControl: true,
                doubleClickZoom: false,
                dragging: true,
                baseLayerType: 'Tencent.Satellite',
                markerConfig: {}
            }
        },
        mounted() {},
        onLoad() {},
        methods: {
            loadMarker() {
                this.markerConfig = {
                    id: '1',
                    position: [39.9065471221135, 116.40528947499452],
                    params: {
                        src: 'https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png',
                        rotate: 0
                    }
                };
            }
        }
    }
</script>

<style>
    .content {
        width: 100vw;
        height: 100vh;
        padding: 0px;
        margin: 0px;
    }

    .btn {
        position: absolute;
        top: 20px;
        z-index: 100000;
    }
</style>
  1. 呼吸点图标
<template>
    <view class="content">
        <MapView ref='mapRef' :center='center' :zoom='zoom' :minZoom='minZoom' :maxZoom='maxZoom'
            :attributionControl='attributionControl' :zoomControl='zoomControl' :doubleClickZoom='doubleClickZoom'
            :dragging='dragging' :baseLayerType='baseLayerType' :highLightMarkerConfig='highLightMarkerConfig'>
        </MapView>
        <button class='btn' style='left:50px;' @click='loadHighLightMarker'>loadHighLightMarker</button>
    </view>
</template>

<script>
    import MapView from '@/uni_modules/taoxiang-leaflet-map-app/components/taoxiang-leaflet-map-app/taoxiang-leaflet-map-app.vue'
    export default {
        components: {
            MapView
        },
        data() {
            return {
                center: [39.9065471221135, 116.40528947499452],
                zoom: 16,
                minZoom: 1,
                maxZoom: 18,
                attributionControl: false,
                zoomControl: true,
                doubleClickZoom: false,
                dragging: true,
                baseLayerType: 'Tencent.Satellite',
                highLightMarkerConfig: {},
            }
        },
        mounted() {},
        onLoad() {},
        methods: {
            loadHighLightMarker() {
                this.highLightMarkerConfig = {
                    id: '1',
                    position: [39.9065471221135, 116.40528947499452],
                    params: {
                        src: 'https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png',
                        rotate: 0,
                        highlight: 'permanent'
                    }
                };
            }
        }
    }
</script>

<style>
    .content {
        width: 100vw;
        height: 100vh;
        padding: 0px;
        margin: 0px;
    }

    .btn {
        position: absolute;
        top: 20px;
        z-index: 100000;
    }
</style>
  1. 弹跳点图标
<template>
    <view class="content">
        <MapView ref='mapRef' :center='center' :zoom='zoom' :minZoom='minZoom' :maxZoom='maxZoom'
            :attributionControl='attributionControl' :zoomControl='zoomControl' :doubleClickZoom='doubleClickZoom'
            :dragging='dragging' :baseLayerType='baseLayerType' :bouncingMarkerConfig='bouncingMarkerConfig'>
        </MapView>
        <button class='btn' style='left:50px;' @click='loadBouncingMarker'>loadBouncingMarker</button>
    </view>
</template>

<script>
    import MapView from '@/uni_modules/taoxiang-leaflet-map-app/components/taoxiang-leaflet-map-app/taoxiang-leaflet-map-app.vue'
    export default {
        components: {
            MapView
        },
        data() {
            return {
                center: [39.9065471221135, 116.40528947499452],
                zoom: 16,
                minZoom: 1,
                maxZoom: 18,
                attributionControl: false,
                zoomControl: true,
                doubleClickZoom: false,
                dragging: true,
                baseLayerType: 'Tencent.Satellite',
                bouncingMarkerConfig: {},
            }
        },
        mounted() {},
        onLoad() {},
        methods: {
            loadBouncingMarker() {
                this.bouncingMarkerConfig = {
                    id: '1',
                    position: [39.9065471221135, 116.40528947499452],
                    params: {
                        src: 'https://unpkg.com/leaflet@1.9.3/dist/images/marker-icon-2x.png',
                        rotate: 0
                    }
                };
            }
        }
    }
</script>

<style>
    .content {
        width: 100vw;
        height: 100vh;
        padding: 0px;
        margin: 0px;
    }

    .btn {
        position: absolute;
        top: 20px;
        z-index: 100000;
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...