微信小程序—地图组件map-显示当前位置、获取经纬度

news/2024/7/20 2:28:45 标签: 小程序, javascript, 前端, css, html

博客概要

     就,利用html" title=小程序>小程序的地图map组件实现单点定位并获取当前经纬度,做一个简单的分享~

文章目录

    • 博客概要
    • 组件map
      • 1.运行结果
      • 2.代码示例
      • 3.元素说明
      • 总结

组件map

1.运行结果

2.代码示例

     没给样式代码噢,自敲~希望读者务必别太懒哈= =

html" title=javascript>javascript"><!-- wxml -->
<map id="map" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}"
  scale="13"  
  show-location
>
  <cover-view>
    <cover-view>
      经度:{{longitude}}
    </cover-view>
    <cover-view>
      纬度:{{latitude}}
    </cover-view>
  </cover-view>
</map>
html" title=javascript>javascript">// js
Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude,
        })
      },
    })
  }
})

3.元素说明

map组件属性

属性说明
longitude中心经度
latitude中心纬度
scale缩放级别,取值范围为3-20
show-location显示带有方向的当前定位点
  • 更多内容点击跳转至官方文档:组件-地图-map

wx.getLocation接口

属性说明
typewgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success接口调用成功的回调函数

Object res

属性说明
latitude纬度,范围为 -90~90,负数表示南纬
longitude经度,范围为 -180~180,负数表示西经
  • 更多内容点击跳转至官方文档:API-位置-wx.getLocation

总结

     更多细节请务必按照给的链接前去查阅官方文档进一步的学习,本文内容只给出了可以直接实现功能的代码,里面涉及的语法、标签等需要读者自己花点时间去理解,仅供参考噢~


http://www.niftyadmin.cn/n/908064.html

相关文章

【转】ASP.NET 防止同一用户同时登陆

要防止同一用户同时登陆,首页应该记录在线用户的信息(这里与用户名为例),然后判断正在登陆的用户里面是否已存在。在这里使用一个cache存放已经登陆的用户名&#xff0c;但是还有一个问题就是要知道用户是什么时候离开系统的呢&#xff1f;这就要定期清除cache中的内容了&#…

微信小程序—地图组件map-功能扩展

博客概要 承接上一篇博文&#xff0c;对微信小程序里的map地图组件做一个功能上拓展的简单分享&#xff0c;拓展功能有指南针显示与否、旋转开启与否、缩放开启与否、拖动开启与否以及卫星图开启与否~ 文章目录博客概要组件map1.运行结果2.代码示例3.元素说明总结组件map 1.运…

MySql指令大全

1、连接Mysql 格式&#xff1a; mysql -h主机地址 -u用户名 &#xff0d;p用户密码1、连接到本机上的MYSQL。首先打开DOS窗口&#xff0c;然后进入目录mysql\bin&#xff0c;再键入命令mysql -u root -p&#xff0c;回车后提示你输密码.注意用户名前可以有空格也可以没有空格&a…

微信小程序—上传代码-体验、审核

博客概要 微信小程序开发&#xff0c;需要将本地代码整体上传至微信公众平台-小程序模块进行审核&#xff0c;经由平台管理员审核通过之后才能上线供用户使用&#xff0c;本篇博文所述内容未涉及云开发&#xff0c;对普通开发的代码上传做一个简要的分享。 文章目录博客概要一、…

JIRA-使用教程_概念

博客概要 JIRA是一个非常强大的项目与事务跟踪工具&#xff0c;博主在具体工作使用中对它爱不释手 &#xff0c;发现它功能全面、配置灵活、扩展丰富…反正优点一大堆&#xff01;好东西嘛就要拿出来&#xff0c;大家一起分享~本博文先简单介绍JIRA相关的基本信息。 文章目录博…

【读书分享】读腾讯《在你身边,为你设计》有感

可以读到这本书事实上有个插曲&#xff0c;之前偶然遇到一位设计师在博文里推荐一些书&#xff0c;当中就包括了《在你身边。为你设计》。因为囊中羞涩那么多书不可能全买&#xff0c;于是我就在网上搜罗各种电子书&#xff0c;终于只有缺了这本。好吧。其它书也够我看非常长一…

JIRA-使用教程_问题单-新建

博客概要 简单分享新增并查看一个问题单的步骤~ 文章目录博客概要《JIRA-使用教程》_总目录问题单-新建1.进入项目2.新建唤起3.填写新建弹窗4.查看问题总结《JIRA-使用教程》_总目录 文章超链接&#xff1a;https://blog.csdn.net/qq_41386332/article/details/108865809 问题…

JIRA-使用教程_筛选器-报表

博客概要 简单分享根据JIRA强大的筛选器&#xff0c;实现制作数据统计报表的步骤~ 文章目录博客概要《JIRA-使用教程》_总目录筛选器_报表实现过程1.搜索问题2.新建筛选器3.添加小程序4.效果展示总结《JIRA-使用教程》_总目录 文章超链接&#xff1a;https://blog.csdn.net/qq…