1. <view class="dh" bindtap="mapNavigation" data-addr="{{address}}">
  2. 导航
  3. <image class="imageD" src="{{pathUrl}}dh.png"></image>
  4. </view>
  1. // 引入SDK核心类
  2. var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
  3. var qqmapsdk;
  4.  
  5. Component({
  6. options: {
  7. multipleSlots: true
  8. },
  9. properties: {
  10. },
  11. data: {
  12. pathUrl: 'https://nlwxapp.oss-cn-beijing.aliyuncs.com/nl-club-image/',
  13. address: '湖北省武汉市光谷软件园F栋'
  14. },
  15. onReady: function (res) {
  16. },
  17. methods: {
  18. phoneCall() {
  19. wx.makePhoneCall({
  20. phoneNumber: '18971401345'
  21. })
  22. },
  23. mapNavigation(e) {
  24. // console.log(e)
  25. console.log(e.target.dataset.addr);
  26. var addr = e.target.dataset.addr;
  27. var that = this;
  28. // 使用 JavaScript SDK 获取目的地经纬度
  29. // 实例化API核心类
  30. qqmapsdk = new QQMapWX({
  31. key: 'TJQBZ-XB333-RGM3W-3Q2DL-7XWV5-DGFQL'
  32. });
  33. qqmapsdk.geocoder({
  34. address: addr,
  35. success: function (res) {
  36. console.log(res);
  37. var local = res.result.location;
  38. that.setData({
  39. latitude: local.lat,
  40. longitude: local.lng
  41. })
  42. }
  43. })
  44. // 使用微信内置地图查看位置
  45. wx.getLocation({
  46. type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  47. success: function (res) {
  48. wx.openLocation({
  49. latitude: that.data.latitude,
  50. longitude: that.data.longitude,
  51. scale: 28,
  52. name: addr, //打开后显示的地址名称
  53. })
  54. }
  55. })
  56. }
  57. }
  58. })

微信小程序开发常见的拉起外部地图软件进行导航的功能的更多相关文章

  1. 微信小程序开发之 下拉刷新,上拉加载更多

    本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...

  2. 微信小程序开发常见坑

    前段时间稍微涉猎了微信小程序开发,踩了一些坑,在此总结出来,希望能为小伙伴们提供一点帮助. 页面跳转 对于页面跳转,可能习惯性想到wx.navigateTo,但是在跳转到目标页面是一个tab时,此接口 ...

  3. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  5. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  6. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  7. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  8. 微信小程序开发详解——小程序,大颠覆!

    微信小程序开发 联系 苏念 188.1414.7927  微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序  ...

  9. 微信小程序开发 -- 02

    微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...

随机推荐

  1. JavaScript 实现块级作用域

    (function(){ 块级作用域: })();

  2. Scaling with Microservices and Vertical Decomposition

    Scaling with Microservices and Vertical Decomposition – dev.otto.de https://dev.otto.de/2014/07/29/s ...

  3. These interactions can be expressed as complicated, large scale graphs. Mining data requires a distributed data processing engine

    https://databricks.com/blog/2014/08/14/mining-graph-data-with-spark-at-alibaba-taobao.html

  4. 20170218 OO-ALV标准工具栏按钮

    原文地址:OO ALV 工具栏对于的功能码   图标与对应的 功能码 明细 &DETAIL 检查 &CHECK 刷新 &REFRESH 剪切 &LOCAL&CU ...

  5. glibc CVE-2015-7547漏洞的分析和修复方法【转】

    本文转载自:http://blog.csdn.net/tengxy_cloud/article/details/50764370 漏洞概述 glibc中处理DNS查询的代码中存在栈溢出漏洞,远端攻击者 ...

  6. POJ1759 Garland —— 二分

    题目链接:http://poj.org/problem?id=1759 Garland Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  7. codeforces 433C. Ryouko's Memory Note 解题报告

    题目链接:http://codeforces.com/problemset/problem/433/C 题目意思:一本书有 n 页,每页的编号依次从 1 到 n 编排.如果从页 x 翻到页 y,那么| ...

  8. oracle:rman恢复----通过时间set until time

    试验计划:先做一个0级备份,再创建一个表,插入几条数据,最后删除表,然后通过rman把该表的数据恢复. 试验环境:在归档模式,oracle10.2.0.1 开始试验: 1.rman level 0备份 ...

  9. jsp重写url

    众所周知,使用java web编程出来的网站都是.jsp结尾的,而别人的网站都是以.html结尾的,那么这种效果是怎么实现的呢?就是这篇文章产生的原因,jsp重写url需要设计到第三方架包urlrew ...

  10. SPOJ:Decreasing Number of Visible Box(不错的,背包?贪心?)

    Shadowman loves to collect box but his roommates woogieman and itman don't like box and so shadowman ...