<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. DRF 之 路由组件

    组件路由的步骤 1.先要导入DefaultRouter from rest_framework.routers import DefaultRouter 2.实例化DeaultRouter对象 rou ...

  2. 如何在退出Hue后关闭Spark会话

    https://mp.weixin.qq.com/s/QLu9XhDv1YuK19VCJsFXGw

  3. SHOW PROCESSLIST Syntax

    https://dev.mysql.com/doc/refman/5.7/en/show-processlist.html SHOW PROCESSLIST shows you which threa ...

  4. 使用forever让node.js持久运行

    何为forever?forever可以看做是一个nodejs的守护进程,能够启动,停止,重启我们的app应用. npm install forever -g #安装 forever start app ...

  5. UILabel与UIFont的用法和属性的一些总结

    初始化一个UILabel对象,并初始化大小 UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(100, 100, 100, 100) ...

  6. 初探linux子系统集之led子系统(三)【转】

    本文转载自:http://blog.csdn.net/eastmoon502136/article/details/37822837 世界杯结束了,德国战车夺得了大力神杯,阿根廷最终还是失败了.也许3 ...

  7. POJ3660 Cow Contest —— Floyd 传递闭包

    题目链接:http://poj.org/problem?id=3660 Cow Contest Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  8. let 命令 与 var的区别

    ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. <script> { let a = 10; var b = 1; } ...

  9. Oracle:imp导入imp-00000问题

    现场环境:window2008 . oracle11.2g  .客户端安装的是oracle10g一个简洁版 34M的. 在imp导入时,提示 Message 100 not found; No mes ...

  10. codeforces 672A A. Summer Camp(水题)

    题目链接: A. Summer Camp time limit per test 1 second memory limit per test 256 megabytes input standard ...