<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. 如何删除ini文件中的内容

    1.删除子项值:::WritePrivateProfileString(分区名称, 子项名称, "", ini文件路径); 2.删除子项(名称和值):::WritePrivateP ...

  2. dp求顺序hdu1160

    题意是仅仅求一次的顺序.先依照速度从大到小排序,速度想等到按体重增序排列. 然后基本就变成了求已定顺序序列的最长递增序列递增,跟那个求一致最大序列和的基本一致. dp[i]里存储的是到当前i最大的递增 ...

  3. liberOJ #2033. 「SDOI2016」生成魔咒 后缀数组

    #2033. 「SDOI2016」生成魔咒     题目描述 魔咒串由许多魔咒字符组成,魔咒字符可以用数字表示.例如可以将魔咒字符 1 11.2 22 拼凑起来形成一个魔咒串 [1,2] [1, 2] ...

  4. aop中获取方法的注解

    @Around(value="@annotation(apiLog)") public Object around(ProceedingJoinPoint pjp, ApiLog ...

  5. Eclipse中设置编码的方法

    Eclipse中设置编码的方式如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字 ...

  6. 【POJ 1159】Palindrome

    [POJ 1159]Palindrome 近期各种题各种奇葩思路已经司空见惯了...又新出个滚动数组= = 该题另一点须要知道 最少须要补充的字母数 = 原序列S的长度 - S和S'的最长公共子串长度 ...

  7. 用redis实现动态时间段内统计排序

    问题描述 需要根据某类数据在动态时间段内的统计值对这些数据进行排名.例如按过去24小时内点赞数排名的帖子,每隔一小时计算一次结果.以下描述均针对这个例子展开. 解决思路 针对这种问题,我的第一反应是直 ...

  8. java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean

    java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean 把 ...

  9. Android系统设置Android adb 开关的方法【转】

    本文转载自:http://www.wxtlife.com/2015/11/24/Android-set-adb-status/ 想第一时间获取我的最新文章,请关注公众号: 技术特工队 在整机系统开发中 ...

  10. POJ - 2142 The Balance(扩展欧几里得求解不定方程)

    d.用2种砝码,质量分别为a和b,称出质量为d的物品.求所用的砝码总数量最小(x+y最小),并且总质量最小(ax+by最小). s.扩展欧几里得求解不定方程. 设ax+by=d. 题意说不定方程一定有 ...