微信小程序：简单实现地图导航功能实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序：简单实现地图导航功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序：简单实现地图导航功能实现

里面的小图片需要自己找，真机调试时，点击导航即可进入地图，可导航，规划路线…

效果图

微信小程序：简单实现地图导航功能实现

代码：

wxml

<!-- 这是地图部分 -->
<view class="map_container">
    <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap' show-location >
    </map>
</view>
<!-- 以下是导航部分 -->
<view class='list-guide'>
    <!-- 这里的坐标本应该是从服务器获取数据的,这时先写死在页面上了data-latitude='39.92392' data-longitude='116.411885' -->
    <view bindtap="onGuideTap" data-latitude='39.92392' data-longitude='116.411885' data-bankName='最高人民检察院'>
        <image src='http://10.3.236.167/images/1.png' class='list-guide-imgae'></image>
        <text class='list-guide-text'>导航</text>
    </view>
</view>

var app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        addmissage: '选的位置',
        // markers	 Array	标记点
        stitle: '故宫',
        latitude: "",
        longitude: "",
        scale: 14,
        markers: [],
        distanceArr: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this
        //获取当前的地理位置、速度
        wx.getLocation({
            type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
            success: function (res) {
                console.log(res);
                //赋值经纬度
                that.setData({
                    latitude: res.latitude,
                    longitude: res.longitude,

                })
                // 发送给朋友、分享朋友圈
                app.onShareAppMessage();
            }
        })



    },
    //导航
    onGuideTap: function (event) {
        var lat = Number(event.currentTarget.dataset.latitude);
        var lon = Number(event.currentTarget.dataset.longitude);
        var bankName = event.currentTarget.dataset.bankname;
        console.log(lat);
        console.log(lon);
        wx.openLocation({
            type: 'gcj02',
            latitude: lat,
            longitude: lon,
            name: bankName,
            scale: 28
        })
    },



})

wxss文章来源地址https://www.toymoban.com/news/detail-515063.html

.map_container {
    margin-bottom: 80rpx;
    height: 420px;
    width: 100%;
}

.map {
    position: relative;
    height: 100%;
    width: 100%;  
}
.list-guide {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 90rpx;
}

.list-guide-imgae {
    height: 80rpx;
    width: 80rpx;
    margin-right: 20px;
    vertical-align: middle;
}

.list-guide-text {
    vertical-align: middle;
    line-height: 90rpx;
    font-size: 35rpx;
}