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

<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, //打开后显示的地址名称
})
}
})
}
}
})
微信小程序开发常见的拉起外部地图软件进行导航的功能的更多相关文章
- 微信小程序开发之 下拉刷新,上拉加载更多
本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...
- 微信小程序开发常见坑
前段时间稍微涉猎了微信小程序开发,踩了一些坑,在此总结出来,希望能为小伙伴们提供一点帮助. 页面跳转 对于页面跳转,可能习惯性想到wx.navigateTo,但是在跳转到目标页面是一个tab时,此接口 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发详解——小程序,大颠覆!
微信小程序开发 联系 苏念 188.1414.7927 微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序 ...
- 微信小程序开发 -- 02
微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...
随机推荐
- java的nio包的SelectionKey,Selector,SelectableChannel三者的缠绵关系概述
猛击这里 java的nio包的SelectionKey,Selector,SelectableChannel三者的缠绵关系概述
- java输入输出流实例代码
1.编写一个程序,读取源代码文件的内容并在控制台输出.如果源文件不存在,则显示相应的错误信息. package src; import java.io.File; import java.io.Fil ...
- 关于static和const
先谈一下static, 它是一个存储修饰变量.被static修饰的变量存储在静态数据区,只初始化一次,保持数据的持久性.被static修饰的变量和函数有一个共同点是对其他的源文件不可见.被static ...
- 高cpu分析
http://www.blogjava.net/hankchen/archive/2012/05/09/377735.html http://www.open-open.com/lib/view/op ...
- javaScript实现增删改查
自己写的一个html+javaScript实现增删改查小实例.下面是js代码1. [代码][JavaScript]代码 //1.创建受捐单位数组var arrOrgData = [ { & ...
- Loadrunner11打开WebTours只显示头部解决办法
1.遇到这种情况,先查看一下路径HP\LoadRunner\WebTours下的cgierr日志中是否有错误,比如Can't open perl script "D:\Program&quo ...
- 禁止屏幕旋转并同时解决以至于导致Activity重启的方法
1.禁止屏幕旋转在AndroidManifest.xml的每一个需要禁止转向的Activity配置中加入android:screenOrientation属性. //landscape(横向)port ...
- async-await原理解析
在用async包裹的方法体中,可以使用await关键字以同步的方式编写异步调用的代码.那么它的内部实现原理是什么样的呢?我们是否可以自定义await以实现定制性的需求呢?先来看一个简单的例子: cla ...
- hel软工网络16个人作业1
1Task1:注册个人博客账号 1Task2:注册码云账号 1Task3:提出问题 3.1问题一:软件工程是什么? 在第一章中我们可以从P8得到: 1.软件工程就是把系统的.有序的.可量化的方法应用到 ...
- BZOJ_2140_稳定婚姻_强连通分量
BZOJ_2140_稳定婚姻_强连通分量 Description 我国的离婚率连续7年上升,今年的头两季,平均每天有近5000对夫妇离婚,大城市的离婚率上升最快,有研究婚 姻问题的专家认为,是与简化离 ...