微信小程序地图实时定位_小程序获取当前位置定位信息

微信小程序地图实时定位_小程序获取当前位置定位信息小程序获取当前位置,回到当前位置,地图定位,导航效果因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段,不然会报微信小程序getLocation需要在app.json中声明permission字段app.json:(不知道具体位置可以看这里,这里有整个app.json的配置)”permission”:{…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

小程序获取当前位置,回到当前位置,地图定位,导航

效果

微信小程序地图实时定位_小程序获取当前位置定位信息

因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段

app.json:   (不知道具体位置可以看这里,这里有整个app.json的配置)

 
 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

wxml:

<!--pages/map/map.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'>
<!-- 这里的坐标本应该是从服务器获取数据的,这时丈先写死在页面上了 -->
  <view bindtap="onGuideTap" data-latitude='39.92392' data-longitude='116.411885' data-bankName='最高人民检察院'>
    <image src='/images/banklist/daohang.png' class='list-guide-imgae'></image>
    <text class='list-guide-text'>导航</text>
  </view>
  <view bindtap='onbankTap' data-bankId="{
  
  {item.BANK_ID}}">
    <image src='/images/banklist/xiangqing.png' class='list-guide-imgae'></image>
    <text class='list-guide-text'>详情</text>
  </view>

</view>

宽度不是满屏,所以加个样式

wxss:

/* pages/map/map.wxss */
.map_container {
  height: 260px;
  width: 100%;
}

.map {
  height: 100%;
  width: 100%;
}




.list-guide{
  display: flex;  
  flex-direction: row; 
  justify-content:space-around;
  border-top: 1px solid #ededed;
  height: 80rpx;
}
.list-guide-imgae{
  height: 70rpx;
  width: 70rpx;
  margin-right: 20px;
  vertical-align: middle;
}
.list-guide-text{
  vertical-align: middle;
  line-height: 90rpx;
  font-size: 35rpx;
}

下面就是最重要的JS部分了()

JS:

// pages/map/map.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    addmissage: '选的位置',
    // markers	 Array	标记点
    stitle:'故宫',
    latitude: "",
    longitude: "",
    scale: 14,
    markers: [],
    //controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件(更新一下,即将废弃,建议使用 cover-view 代替))
    controls: [{
      id: 1,
      iconPath: '../../images/img/controls.png',
      position: {
        left: 15,
        top: 260 - 50,
        width: 40,
        height: 40
      },
      clickable: true
    }],
    distanceArr: []
  },

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

        })
      }
    })



  },
  //controls控件的点击事件
  bindcontroltap(e) {
    var that = this;
    if (e.controlId == 1) {
      that.setData({
        latitude: this.data.latitude,
        longitude: this.data.longitude,
        scale: 14,
      })
    }
  },
  //导航
  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
    })
  },



})

项目下载在这里

(只是地图部份,也有删减,非实际项目全部) 已更新

下面是我实际项目中的截图

微信小程序地图实时定位_小程序获取当前位置定位信息

微信小程序地图实时定位_小程序获取当前位置定位信息

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188188.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux下在线安装Node.js

    Linux下在线安装Node.jsCentos下在线安装Node.jsLinux下在线安装Node.js查看有哪些版本dnfmodulelistnodejs安装nodejs14dnfmoduleinstallnodejs:14验证是否安装成功node-v

    2022年10月21日
  • mac版pycharm使用方法_电脑管家mac版是什么意思

    mac版pycharm使用方法_电脑管家mac版是什么意思自定义模版在头部自动生成项目名称、文件所属作者、生成时间参数模版。File–>PreferencesforNewProject–>Editor–>FileandCodeTemplates–>PythonScript–>编辑完后点Apply–>OK#!/usr/bin/envpython#-*-coding…

  • 大数据:数据采集平台之Fluentd

    大数据:数据采集平台之Fluentd大数据:数据采集平台之Fluentd官网:http://docs.fluentd.org/articles/quickstartFluentd是一个开源的数据收集框架。Fluentd使用C/Ruby开发,使用JSON文件来统一日志数据。它的可插拔架构,支持各种不同种类和格式的数据源和数据输出。最后它也同时提供了高可靠和很好的扩展性。TreasureData,Inc对该产品提供支持和维…

  • 长尾分布数据_厚尾分布

    长尾分布数据_厚尾分布长尾分布数据11.什么是长尾分布数据长尾分布数据是一种偏态分布,是指几个类别(亦叫头类)包含大量的样本,而大多数类别(亦叫尾类)只有非常少量的样本。类似这样的数据集会使得深度学习网络在头部类中表现良好,在尾部类中效率不高,整体的识别精度显著下降。2.解决办法大多数研究者通过不平衡学习策略来解决长尾识别问题,主要分为两类:数据级方法和算法级方法。数据级方法数据水平的策略包括尾部类过采样,头部类欠采样,以及其他新的抽样方法。所以解决手段主要着力于如何对数据进行抽样。这种方法存在的问题是,过采

    2022年10月23日
  • chmod的使用方法_chmod 命令

    chmod的使用方法_chmod 命令chmoda+xplatform814_linux32.bin意思是给platform814_linux32.bin文件所有用户添加x(可执行)权限chmod是一个改变文件权限的命令其中u代表用户,g代表组,o代表其他,a代表全部中间的+代表添加,-代表取消,=代表重设最后r代表可读,w代表可写,x代表可执行

    2022年10月20日
  • angularjs子组件向父组件传值_react子组件传值

    angularjs子组件向父组件传值_react子组件传值Angular父组件给子组件传值的方法与注意事项

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号