小程序地图标点,导航

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

    "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;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值