微信小程序中,使用map,实现获取当前位置和规划起始位置到目标位置的路线

 在app.json中进行声明

"requiredPrivateInfos": [  

    "getLocation"  

  ] 
<view class="main">
  <navigation-bar default-data="{{defaultData}}"></navigation-bar>
  <view class="mainBody">
    <!-- 在wxml文件中使用map组件 -->  
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}" show-location style="width: 100%; height: 89vh;"></map>
  </view>
</view>
var ports = require("../../../utils/ports.js")
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    defaultData: {
      title: "校园地图", // 导航栏标题
      arrow: true, //是否显示返回箭头
    },
    query: {},
    latitude: '', // 地图中心点纬度  
    longitude: '', // 地图中心点经度  
    scale: 14, // 缩放级别,取值范围为3-20  
    markers: [], // 标记点  
    polyline: [], // 路线数据,通常是一个包含多个坐标点的数组  
    endLat:app.endLat,// 终点纬度
    endLng:app.endLng,// 终点经度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  // ... 其他代码,包括获取位置、规划路线等  
  // 当获取到路线数据后,更新polyline数据以在地图上展示路线  
  updateRouteOnMap(routeData) {
    // 将routeData转换为地图组件可以识别的polyline格式  
    const polyline = []; // 转换后的路线数据  
    this.setData({
      polyline: polyline
    });
  },
  // ... 其他函数和逻辑 

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getUserLocation()
  },
  // 获取用户当前坐标
  getUserLocation() {
    const that=this
    wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标  
      success: function (res) {
        const latitude = res.latitude; // 纬度,浮点数,范围为-90~90,负数表示南纬  
        const longitude = res.longitude; // 经度,浮点数,范围为-180~180,负数表示西经  
        console.log('经度',longitude);
        console.log('纬度',latitude);
        that.setData({
          longitude:longitude,
          latitude:latitude,
        })
        that.planningRoute()
        // 这里可以调用规划路线的函数,将当前位置作为起点  
      },
      fail: function (err) {
        console.error(err);
      }
    });
  },
  // 规划路线
  planningRoute() {
    // 假设你已经有了起点和终点的坐标  
    const startLat = this.data.latitude; // 起点纬度  
    const startLng = this.data.longitude; // 起点经度  
    const endLat = this.data.endLat; // 终点纬度  
    const endLng = this.data.endLng; // 终点经度  
    const that=this
    // 注意,你需要再微信公众号后台,配置request合法域名,把https://apis.map.qq.com添加到你的request合法域名中。(微信公众平台—设置—开发设置—服务器域名)。
    // 构建请求URL(这里只是一个示例,你需要查看腾讯地图API文档来获取正确的URL和参数)  
    const url = `https://apis.map.qq.com/ws/direction/v1/driving?origin=${startLat},${startLng}&destination=${endLat},${endLng}&key=${app.TXKey}`;

    wx.request({
      url: url,
      method: 'GET',
      success: function (res) {
        // 解析返回的路线数据,准备在地图上展示  
        const routeData = res.data; // 这里是假设的数据结构,具体取决于API返回的内容  
        console.log('路线数据',routeData);
        // if(routeData.status==200){
        //   that.setData({
        //     polyline:routeData.
        //   })
        // }
        // 将路线数据传递给地图组件或相关函数进行展示  
      },
      fail: function (err) {
        console.error(err);
      }
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Uniapp 开发微信小程序,可以通过百度地图 JavaScript API 来实现地图显示、获取当前位置以及围栏守护功能。下面是一个简单的代码实现示例: 首先,需要在 `script` 标签引入百度地图 JavaScript API: ```html <script src="http://api.map.baidu.com/api?v=3.0&ak=your_baidu_map_ak"></script> ``` 然后,在页面的 `template` 添加一个地图容器: ```html <template> <view class="map-container"> <map id="map" style="width: 100%; height: 100%;"></map> </view> </template> ``` 接下来,在页面的 `script` ,可以编写相关的 JavaScript 代码来初始化地图、获取当前位置以及设置围栏守护。示例代码如下: ```javascript <script> export default { data() { return { map: null, fence: null } }, onReady() { // 初始化地图 this.map = new BMap.Map('map'); this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 获取当前位置 this.getCurrentLocation(); // 设置围栏守护 this.setFence(); }, methods: { getCurrentLocation() { let geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition((position) => { if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) { let marker = new BMap.Marker(position.point); this.map.addOverlay(marker); this.map.panTo(position.point); } }); }, setFence() { let circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000, { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5, fillColor: 'blue', fillOpacity: 0.2 }); this.map.addOverlay(circle); this.fence = circle; } } }; </script> ``` 以上代码实现了在 Uniapp 微信小程序使用百度地图 API 实现地图显示、获取当前位置和设置围栏守护的功能。需要注意的是,示例代码的 `your_baidu_map_ak` 部分需要替换为你自己的百度地图 AK(Access Key)。 请注意,这只是一个简单的示例,具体的功能和样式可以根据实际需求进行修改和扩展。同时,使用百度地图 API 需要在百度开放平台申请对应的服务并获取 AK,确保 AK 的安全性和正确性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值