<view class="dh" bindtap="mapNavigation" data-addr="{{address}}">
导航
<image class="imageD" src="{{pathUrl}}dh.png"></image>
</view>
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
var qqmapsdk; Component({
options: {
multipleSlots: true
},
properties: {
},
data: {
pathUrl: 'https://nlwxapp.oss-cn-beijing.aliyuncs.com/nl-club-image/',
address: '湖北省武汉市光谷软件园F栋'
},
onReady: function (res) {
},
methods: {
phoneCall() {
wx.makePhoneCall({
phoneNumber: '18971401345'
})
},
mapNavigation(e) {
// console.log(e)
console.log(e.target.dataset.addr);
var addr = e.target.dataset.addr;
var that = this;
// 使用 JavaScript SDK 获取目的地经纬度
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'TJQBZ-XB333-RGM3W-3Q2DL-7XWV5-DGFQL'
});
qqmapsdk.geocoder({
address: addr,
success: function (res) {
console.log(res);
var local = res.result.location;
that.setData({
latitude: local.lat,
longitude: local.lng
})
}
})
// 使用微信内置地图查看位置
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
wx.openLocation({
latitude: that.data.latitude,
longitude: that.data.longitude,
scale: 28,
name: addr, //打开后显示的地址名称
})
}
})
}
}
})

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

  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. Handler有何作用?怎样使用?

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012974916/article/details/24580405 一  Handler作用和概念 ...

  2. nodejs 实战

    使用 Koa + MongoDB + Redis 搭建论坛系统 「新手向」koa2从起步到填坑 基于koa2和react的PC端脚手架 一键生成koa/koa2项目: nodejs原生,express ...

  3. uCOS-II模拟(VS2010&WIN32)

    转自http://www.amobbs.com/thread-5462878-1-1.html 自学uCOS-II源码,在论坛上上看到大神在WIN7 Visual Studio 2010环境下调试uC ...

  4. driver, module以及怎么看他们

    1. driver和module的区别 https://unix.stackexchange.com/questions/47208/what-is-the-difference-between-ke ...

  5. 安装程序工具 (Installutil.exe)22

    网址:https://msdn.microsoft.com/zh-cn/library/50614e95(VS.80).aspx  安装程序工具 (Installutil.exe) .NET Fram ...

  6. CGAffineTransform属性

    transform我们一般称为形变属性,其本质是通过矩阵变化改变控件的大小.位置.角度等,这里我们通过一个例子来看一下具体的操作,在下面的例子中我们也会看到UIImageView控件的常用操作. - ...

  7. Redmine 数据库连接错误

    /******************************************************************** * Redmine 数据库连接错误 * 说明: * Open ...

  8. 【POJ 2752】 Seek the Name, Seek the Fame

    [题目链接] 点击打开链接 [算法] KMP 沿着失配指针扫一遍即可 [代码] #include <algorithm> #include <bitset> #include ...

  9. struct 结构体解析(原)

    (一)基本概念 结构体是一个或是多个变量的集合,这些变量可能为不同的类型,为了处理的方便而将这些变量组合在一个名字之下.我们将关键字struct引入了结构声明中.结构声明包含在花括号内的一系列声明组成 ...

  10. 在msys里进行复制和粘贴操作

    You can copy text from an MSYS window to the clipboard simply by selecting the text you want to copy ...