小程序地图标点，导航

最新推荐文章于 2024-06-19 16:42:20 发布

Fznns

最新推荐文章于 2024-06-19 16:42:20 发布

阅读量48

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/qq_44583363/article/details/134441065

版权

记一下[小程序地图标点和导航]，不知道以后干啥用，先记一下。
后续补齐[获取微信步数]，[定位打卡(海拔高度?)]，[轨迹记录]

    "plugins": {
        "routePlan": {
            "version": "latest",
            "provider": "wx50b5593e81dd937a"
        }
    },
    "requiredPrivateInfos": [
        "getLocation"
    ]

// test/map.js
let key = '****-O6GCF-*****-NVYTS-YSHFE-****'
let referer = '***测试';
Page({
    /**
     * 页面的初始数据
     */
    data: {
        markers: [],
        latitude: 39.1594135,
        longitude: 117.2371392,

        showDialog: false,
        includePoints: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let markers = [{
            id: 0,
            title: '天津知识产权交易所',
            latitude: 39.098994,
            longitude: 117.201083,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 1,
            title: '天津金融大厦后门吧',
            latitude: 39.098494,
            longitude: 117.201203,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 2,
            title: '天津迎宾馆',
            latitude: 39.0996818,
            longitude: 117.2025378,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 3,
            title: '不知道是哪',
            latitude: 39.1323176,
            longitude: 117.1557887,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 4,
            title: '又一个地方',
            latitude: 39.1523176,
            longitude: 117.2557887,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }]
        this.setData({
            markers
        })


    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        this.mapCtx = wx.createMapContext('myMap')
    },

    markertap(e) {
        let check = this.data.markers[e.markerId]
        this.setData({
            showDialog: true,
            check
        })
    },
    onClickHide() {
        this.setData({
            showDialog: false
        })
    },
    go() {
        let data = this.data.check
        let endPoint = JSON.stringify({
            'name': data.title,
            'latitude': data.latitude,
            'longitude': data.longitude
        });
        wx.navigateTo({
            url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
        });
    },
    sfll13() {
        let markers = [{
            id: 0,
            title: '天津知识产权交易所',
            latitude: 39.098994,
            longitude: 117.201083,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 1,
            title: '天津金融大厦后门吧',
            latitude: 39.098494,
            longitude: 117.201203,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 2,
            title: '天津迎宾馆',
            latitude: 39.0996818,
            longitude: 117.2025378,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }]
        this.setData({
            markers
        })
        let points = [{
                latitude: 39.098994,
                longitude: 117.201083,
            },
            {
                latitude: 39.098494,
                longitude: 117.201203,
            }, {
                latitude: 39.0996818,
                longitude: 117.2025378,
            }
        ]
        this.mapCtx.includePoints({
            padding: [100],
            points,
        })
    },
    sfll4() {
        let markers = [{
            id: 3,
            title: '我的位置',
            latitude: 39.1323176,
            longitude: 117.1557887,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }, {
            id: 4,
            title: '我的位置',
            latitude: 39.1523176,
            longitude: 117.2557887,
            iconPath: '/images/logo.png',
            width: 30,
            height: 30
        }]
        this.setData({
            markers
        })
        let points = [{
            latitude: 39.1323176,
            longitude: 117.1557887,
        }, {
            latitude: 39.1523176,
            longitude: 117.2557887,
        }]
        this.mapCtx.includePoints({
            padding: [100],
            points,
        })
    },
    sflla() {
        this.onLoad()
        let points = [{
                latitude: 39.098994,
                longitude: 117.201083,
            },
            {
                latitude: 39.098494,
                longitude: 117.201203,
            }, {
                latitude: 39.0996818,
                longitude: 117.2025378,
            }, {
                latitude: 39.1323176,
                longitude: 117.1557887,
            }, {
                latitude: 39.1523176,
                longitude: 117.2557887,
            }
        ]
        this.mapCtx.includePoints({
            padding: [100],
            points,
        })
    },
    // 获取微信步数
    getRunData() {
        wx.login({
            success: (res) => {
                wx.getWeRunData({
                    success: (result) => {console.log(result)},
                    fail: (res) => {console.warn(res)},
                })
            },
        })
    },
    // 获取当前定位
    getLocation(){
        wx.getLocation()
    }
})

<!--test/map.wxml-->
<scroll-view scroll-y="true" style="width: 100%;height: 8vh;">
    <view>
        缩放:
        <text bind:tap="sfll13">[1-3坐标点] </text>
        <text bind:tap="sfll4">[4-5坐标点] </text>
        <text bind:tap="sflla">[全部]</text>
    </view>
    <view bind:tap="getRunData">
        获取微信步数:{{runData}}
    </view>
</scroll-view>

<map id="myMap" style="width: 100%; height: 92vh;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" scale="16" show-location="{{true}}" scale="10" bindmarkertap="markertap">
</map>


<van-overlay show="{{ showDialog }}" bind:click="onClickHide">
    <view class="wrapper">
        <view class="block" catch:tap="1">
            当前点击：{{check.title}}
            <text catch:tap="go">
                [导航]
            </text>
        </view>
    </view>
</van-overlay>

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 80vw;
    height: 80vh;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 50rpx 20rpx;
}