微信小程序实现打开内置地图功能【附源码下载】


Posted in Javascript onDecember 07, 2017

本文实例讲述了微信小程序实现打开内置地图功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序实现打开内置地图功能【附源码下载】

2、关键代码

index.wxml布局文件代码

<button type="default" bindtap="openMap">打开地图</button>

index.js逻辑文件代码

Page({
 openMap:function(){
  wx.getLocation({
   type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
   success: function(res){
    // success
    wx.openLocation({
     latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
     longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
     scale: 28, // 缩放比例
    })
   }
  })
 }
})

这里bindtap="openMap"绑定的openMap函数中调用wx.openLocation函数获取本机经纬度信息。

更多关于wx.openLocation函数详细介绍可参考官网 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html

3、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
JavaScript 函数的执行过程
May 09 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
js实现关闭网页出现是否离开提示
Dec 07 #Javascript
JavaScrip关于创建常量的知识点
Dec 07 #Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 #Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 #Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
vue中路由参数传递可能会遇到的坑
Dec 07 #Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 #Javascript
You might like
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
原生js实现日历效果
2020/03/02 Javascript
前端性能优化建议
2020/09/17 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python爬虫基本知识
2018/03/05 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
《口技》教学反思
2014/02/21 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
德劲DE1102数字调谐收音机机评
2022/04/07 无线电