Taro开发微信小程序之利用腾讯地图sdk标记
首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用。
import QQMapWX from '../../sdks/qqmap-wx-jssdk'
设置好后,就可以开始使用了。
let qqmapsdk = new QQMapWX({
key: '自己申请的key'
})
let _this = this
Taro.getLocation({
type: 'wgs84',
success(res) {
_this.setState({
latitude = res.latitude
longitude = res.longitude
})
}
})
let mks =[]
let _this = this //这里声明下_this,使用taro的this.直接操作到微信调试工具会报错(可能是我姿势不对)
qqmapsdk.search({
keyword: '工厂',
success: function (res) {
// let _this = this
mks =[] for (let i =0; i < res.data.length; i++) {
mks.push({
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: workermarker, //图片路径
width: 20, height: 20 }
)}
console.log(mks)
_this.setState({ markers: mks })
// this.setData({ // markers: mks // })
console.log(res)
}, fail: function (res) { console.log(res) }, complete: function (res) { console.log(res) } })
好了,这样就可以愉快的在地图上实现标记了。
真机调试的时候看不数据,吓一跳,一百度,原来是没用勾选详情下面的“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”,勾选了就可以了。
Taro开发微信小程序之利用腾讯地图sdk标记的更多相关文章
- Taro开发微信小程序
Taro开发微信小程序 https://www.cnblogs.com/rynxiao/p/9230237.html 了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:&qu ...
- 微信小程序室内地图导航开发-微信小程序JS加载esmap地图
一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...
- Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
- Taro开发微信小程序遇到的问题和解决方法
1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...
- Taro开发微信小程序之初始化地图到当前位置
在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //c ...
- 微信小程序中通过腾讯地图进行逆地址解析报错message: "请求来源未被授权, 此次请求来源域名:servicewechat.com"
在小程序中获取定位具体信息时,不要配置腾讯地图中的WebServiceAPI中的域名白名单什么的,域名配置直接在小程序后台中配置(就是这个货https://apis.map.qq.com), 千万千万 ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- 利用WordPress REST API 开发微信小程序从入门到放弃
自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍 ...
- 迅速上手:使用taro构建微信小程序基础教程
前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...
随机推荐
- redis订阅发布消息操作本地缓存
Redis 本地缓存+远程缓存方案 使用纯java的ehcache作为本地缓存 Reids 作为远程分布式缓存 解决redis缓存压力过大,提高缓存速度,以及缓存性能. Redis和ehcache缓存 ...
- 多个ROS工作空间常见的问题
1. 在/home/user_name/.bashrc文件中写入多个工作空间的环境变量,这样会导致环境变量之间相互覆盖.最常见的问题就是找不到工作空间中某个launch文件.节点.rviz插件等. 解 ...
- 使用Visual Studio Code开发(编译、调试)C++程序
总体安装步骤 安装VSC(Visual Studio Code). 安装C/C++编译器(如MinGW-w64),然后配置好环境变量.//完成这步即可在VSC的终端(命令行)下编译.运行.cpp程序了 ...
- Web高级 Eventloop和事件执行顺序
1. EventLoop 1.1 调用栈 当一个方法执行时内部调用另外的方法,则会形成调用栈,如图: 1.2 任务队列 JavaScript有一个主线程执行当前任务,主线程的代码同步执行,并把遇到的事 ...
- ../../在url中的表现
可能会被忽略的url跳转方式,后端验证时需要考虑这种情况: https://zhidao.baidu.com/question/566551732268407284.html/../../?entry ...
- 洛谷P1040 加分二叉树(树形dp)
加分二叉树 时间限制: 1 Sec 内存限制: 125 MB提交: 11 解决: 7 题目描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,...,n),其中数字1,2,3,...,n ...
- (最详细)小米Note 2的usb调试模式在哪里开启的教程
当我们使用安卓手机链接Pc的时候,或者使用的有些工具比如我们学院营销团队当使用的工具引号精灵,之前使用的老版本就需要开启USB开发者调试模式下使用,现当新版本不需要了,如果手机没有开启USB开发者调试 ...
- 流程帮App风险评估
一. 存在风险 此处罗列出了我们开发小组可能遇到8种的风险. 编号 风险名称 内容 发生概率 损失(人周) 危险度(周) 1 计划编制风险 对所要使用技术不熟悉,可能导致无法交付: 每个模块的实现一定 ...
- 一、新建springBoot项目
三种方式新建SpringBoot项目: 官网, myeclipse, idea 1.官方网站新建(https://start.spring.io/) 1)打开官网,选择自己需要的springBo ...
- 2018-2019-2 20165312《网络攻防技术》Exp1 PC平台逆向破解
2018-2019-2 20165312<网络攻防技术>Exp1 PC平台逆向破解 一.Exp1.1 直接修改程序机器指令,改变程序执行流程 知识要求:Call指令,EIP寄存器,指令跳转 ...