小程序之map组件(从我的位置到指定位置导航)

需求

不显示 map 组件,点击对应按钮,从而实现导航

所用到的组件 + API
  1. map组件

  2. wx.getLocation(Object object) – 获取当前的地理位置、速度。

  3. wx.openLocation(Object object) – 使用微信内置地图查看位置。

map地址

API地址

app.json 配置
"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
},
.xml
<view class="shop_info">
    <view class="info_item  bgWhite" bind:tap="goShowMap">
      <i class="iconfont address"></i>
      <text>xxxxx地址</text>
    </view>
</view>


<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}"
  bindmarkertap="markertap" bindregionchange="regionchange" show-location style="display: none;">
</map>
.js
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    //设置标记点
    markers: [
      {
        latitude: 23.1066805,
        longitude: 113.3245904,
        name: '广州塔',
        address: '广州市海珠区阅江西路222号',
      }
    ],
    latitude: '',
    longitude: '',
  },
  onLoad: function () {
    let _self = this;
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        _self.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
    })
  },

  //查看地图
  goShowMap: function (e) {
    this.openMap()
  },

  openMap: function () {
    let that = this;

    wx.openLocation({
      latitude: this.data.markers[0].latitude,
      longitude: this.data.markers[0].longitude,
      name: this.data.markers[0].name,
      address: this.data.markers[0].address,
    })

  },
})
.wxss
.shop_info {
    .info_item {
        display: flex;
        align-items: center;
        padding: 32rpx 30rpx;
        border-bottom: solid 1px #f3f0f3;
        i {
            font-size: 38rpx;
            font-weight: 600;   
        }
        text {
            flex: 1;
            height: 100%;
            margin-left: 12rpx;
            font-size: 30rpx;
        }
        &:first-child {
            border-top: solid 1px #f3f0f3;
        }
    }
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序是一种轻量化的应用程序,可以在微信中直接使用。它具有快速开发、轻便易用等优点。其中,微信小程序map组件可以用于定位当前位置。 首先,在小程序开发工具中添加map组件,可以利用微信提供的API进行对地图的操作。然后,在页面上添加按钮或者其他交互方式,触发定位功能。可以通过微信提供的wx.getLocation接口获取当前地理位置,将其坐标转换为经纬度等信息,再在地图上显示出来。 微信小程序map组件还可以加入自定义的标记点、路线等功能。比如,可以在地图上设置一个目标地点,当用户到达该地点时进行提醒。除此之外,还可以将地图与其他组件联动,实现更多实用性功能。 总之,通过微信小程序map组件定位当前位置可以在很多场景下得到运用,例如共享单车、打车等领域,也为用户带来更加便利和舒适的出行体验。 ### 回答2: 微信小程序的定位功能可以让用户在地图上查看自己的当前位置,并且可以进行定位导航等一系列应用操作。 要使用微信小程序的定位功能,首先需要获取用户的授权。用户可以通过点击相关按钮进行授权,同时小程序需要向用户说明获取授权的作用和用途。 获取授权后,就可以通过小程序调用微信地图API,实现对用户当前位置的定位功能。用户当前位置会在地图上进行标注,并且可以实现定位导航、查询周边信息等功能。 除了获取授权和调用API之外,开发者还需要考虑到用户体验和隐私保护等方面。比如,在页面显示用户当前位置时要注意保护用户隐私,使用合适的地图标识等。 总体来说,微信小程序的定位功能可以方便用户在不同场景下使用地图,同时也增加了小程序的实用性。对开发者而言,需要注意用户隐私和开发规范等方面的问题,以保证用户体验和小程序功能的完善。 ### 回答3: 微信小程序中提供了一种方便的方法,可以使用map组件定位当前位置。这个组件可以用来显示地图和标记位置,还可以选择地图的种类和放大程度。在小程序中,我们只需要在wxml文件中添加map组件,然后在js文件中调用API即可进行位置定位。 首先,我们需要引入wx.getLocation() API,这个API可以获得当前用户的地理位置。通过这个API获得的经纬度信息,我们可以通过地图定位到用户的当前位置。在js文件中添加如下代码,就可以实现定位操作: ``` wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } }) ``` 其中,type参数可以设置定位方式,gcj02表示国测局加密经纬度坐标,还有其他选项,具体可以查看文档。通过上述代码,我们得到用户的经纬度位置,并可以通过map组件显示在地图上。 ``` <map latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" show-location="{{true}}" /> ``` 最后,在wxml文件中加入map组件即可。其中,latitude和longitude参数分别表示经纬度位置,scale参数表示显示比例尺,markers参数可以设置地图标记,show-location参数表示是否显示定位标记。 总之,通过微信小程序map组件和wx.getLocation() API,我们可以轻松实现定位当前位置的操作。这一功能在很多小程序中都会用到,比如地图导航、外卖送餐等等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值