您现在的位置是:网站首页>>微信>>微信小程序

微信小程序实现定位及到指定位置导航

发布时间:2019-08-19 15:08:22作者:wangjian浏览量:66点赞量:0

    一:实现定位及到指定位置导航所需组件及API

    1:组件:map(地图组件)

    2:API:wx.getLocation(Object object)(获取当前的地理位置、速度),wx.openLocation(Object object)(使用微信内置地图查看位置)

    二:代码实现

    前提:在app.json中加上:

    "permission":{
    "scope.userLocation": {
    "desc": "获取位置" 
    }
    },

    1:wxml

    <view>
    <map id="map"
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    scale="14"
    markers="{{markers}}"
    bindmarkertap="markertap"
    bindregionchange="regionchange"
    show-location
    style="width: 100%; height: 300px;"
    >
    </map>
    </view>
    <view>
    <button type="primary" bindtap="navigate">导航</button>
    </view>

    2:js

    //js
    Page({
    /**
       * 页面的初始数据
       */
    data: {
    //设置标记点
    markers: [
    {
    iconPath: "/images/ljx.png",
    id: 4,
    latitude: 31.938841,
    longitude: 118.799698,
    width: 30,
    height: 30
    }
    ],
    //当前定位位置
    latitude:'',
    longitude: '',
    },
    navigate() {
    ////使用微信内置地图查看标记点位置,并进行导航
    wx.openLocation({
    latitude: this.data.markers[0].latitude,//要去的纬度-地址
    longitude: this.data.markers[0].longitude,//要去的经度-地址
    })
    },
    onLoad() {
    //获取当前位置
    wx.getLocation({
    type: 'gcj02',
    success: (res) => {
    console.log(res)
    this.setData({
    latitude: res.latitude,
    longitude: res.longitude
    })
    }
    })
    }
    })

    根据如上即可实现自身定位及到指定位置的导航,如下:

    微信图片_20190819150501.png

    微信图片_20190819150456.png

    微信图片_20190819150450.png

    微信图片_20190819150440.png


0 +1