更新记录

1.0.0（2021-04-07） 下载此版本

第一次提交

平台兼容性

前言

简介：地图轨迹组件

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

有疑问

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

属性说明

素材

图片资源

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

微信小程序： 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>

汇总组件

组件汇总

其他有意思组件

动画效果之跳跃（抽奖）

网页

网页链接

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