更新记录

1.0.0(2021-04-07)

第一次提交


平台兼容性

前言

简介:地图轨迹组件

1.引用即可使用,可自定义各项展示,目前只适用微信小程序

有疑问

微信搜索“慢慢向好”小程序,找客服反馈,相应问题。

属性说明

属性 类型 说明
mapId String 地图id,默认mapId_contrail
points Array 轨迹数组
longitude Number 经度
latitude Number 纬度
scale Number 缩放级别,取值范围为3-20,默认14
longitude Number 当前位置经度
latitude Number 当前位置纬度
satellite Boolean 否开启卫星图,默认开启

素材

图片资源

示例项目,配置好,可直接运行

微信小程序: 1.配置自己的微信小程序appid; 2.微信小程序后台:设置->第三方平台授权管理->腾讯位置服务; 3.腾讯位置服务也绑定微信小程序appid.

开始使用

下载源码解压,复制/components 下的组件至项目根目录的 /components 文件夹下 manifest.json的加入如下部分(注意文件格式,用于获取附近):

"permission" : {
            "scope.userLocation" : {
                "desc" : "您的位置信息将用于为您展示附近"
            }
        }

index.vue的加入如下部分:

<template>
    <view>
        <aycontrail  :points="points" :latitude="latitude" :longitude="longitude" scale="12" :satellite="true"></aycontrail>

    </view>

</template>

<script>
    import aycontrail from '../components/ay-contrail/ay-contrail.vue';
    export default {
        components: {
            aycontrail,
        },

        computed: {

        },
        data() {
            return {

                points: [],
                latitude: 39.806466,
                longitude: 98.226473,
            };
        },
        // #ifdef MP-WEIXIN
        //微信小程序的分享
        onShareAppMessage: function(options) {

        },
        // #endif
        onReady: function() {

        },
        onLoad: function() {
            let that = this;
        },
        onShow: function() {
            let that = this;
            // 获取当前坐标
            uni.getLocation({
                type: 'wgs84',
                success: (res) => {
                    let longitude = res.longitude ;
                    let latitude = res.latitude ;
                    // 坐标集合
                    let points = [{
                        longitude: longitude,
                        latitude: latitude
                    }, {
                        longitude: longitude - 0.02,
                        latitude: latitude + 0.02
                    }, {
                        longitude: longitude + 0.03,
                        latitude: latitude + 0.03
                    }, {
                        longitude: longitude - 0.01,
                        latitude: latitude + 0.02
                    }, {
                        longitude: longitude,
                        latitude: latitude
                    }];
                    that.latitude = res.latitude;
                    that.longitude = res.longitude;
                    that.points = points;

                },
                fail:function(err){
                    let longitude = that.longitude ;
                    let latitude = that.latitude ;
                    // 坐标集合
                    let points = [{
                        longitude: longitude,
                        latitude: latitude
                    }, {
                        longitude: longitude - 0.02,
                        latitude: latitude + 0.02
                    }, {
                        longitude: longitude + 0.03,
                        latitude: latitude + 0.03
                    }, {
                        longitude: longitude - 0.01,
                        latitude: latitude + 0.02
                    }, {
                        longitude: longitude,
                        latitude: latitude
                    }];
                    that.points = points;
                }
            })

        },

        methods: {

        },
    }
</script>

<style lang="scss">

</style>

汇总组件

组件汇总

其他有意思组件

动画效果之跳跃(抽奖)

网页

网页链接

供学习整理,易于下次便捷使用与快捷重复使用,如有任何冒犯的地方,可微信搜索“慢慢向好”小程序,找客服说明删除

隐私、权限声明

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

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

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

许可协议

MIT协议

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