首先要下载腾讯地图提供的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标记的更多相关文章

  1. Taro开发微信小程序

    Taro开发微信小程序 https://www.cnblogs.com/rynxiao/p/9230237.html 了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:&qu ...

  2. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  3. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  4. Taro开发微信小程序遇到的问题和解决方法

    1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...

  5. Taro开发微信小程序之初始化地图到当前位置

    在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //c ...

  6. 微信小程序中通过腾讯地图进行逆地址解析报错message: "请求来源未被授权, 此次请求来源域名:servicewechat.com"

    在小程序中获取定位具体信息时,不要配置腾讯地图中的WebServiceAPI中的域名白名单什么的,域名配置直接在小程序后台中配置(就是这个货https://apis.map.qq.com), 千万千万 ...

  7. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  8. 利用WordPress REST API 开发微信小程序从入门到放弃

    自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍 ...

  9. 迅速上手:使用taro构建微信小程序基础教程

    前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...

随机推荐

  1. 没有可用软件包 libgdiplus 解决方法

    1.下载 epel-release-7-11.noarch.rpm wget http://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel ...

  2. Spring配置从配置文件读取属性值

    spring将properties文件读取后在配置文件中直接将对象的配置信息填充到bean中的变量里. 原本使用PropertyPlaceholderConfigurer类进行文件信息配置.Prope ...

  3. xmind 8 便携版:关联文件后,双击打开文件,在当前文件夹产生configuration子文件的问题解决办法

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xmind] @="XMind.Workbook.3" " ...

  4. 纵观 jBPM:从 jBPM3 到 jBPM5 以及 Activiti5

    https://www.infoq.cn/article/rh-jbpm5-activiti5# 对jBPM来说,今年最大的事件莫过于 jBPM 的创建者Tom Baeyens离开 JBoss 了.T ...

  5. 20175227张雪莹 2018-2019-2 《Java程序设计》第八周学习总结

    20175227张雪莹 2018-2019-2 <Java程序设计>第八周学习总结 教材学习内容总结 第十五章 泛型与集合框架 泛型:主要目的是可以建立具有类型安全的集合框架,如链表.散列 ...

  6. 深度优先搜索DFS(一)

      实例一  0/1背包问题:   有n件物品,每件物品的重量为w[i],价值为c[i].现在需要选出若干件物品放入一个容量为V的背包中,使得在选入背包的物品重量和不超过容量V的前提下,让背包中的物品 ...

  7. JAVA的DES加密解密在windows上测试一切正常,在linux上异常

    windows上加解密正常,linux上加密正常,解密时发生 如下异常,异常信息如下: [ERROR] 2018-10-15 09:30:35,998 method:com.iscas.ippc.co ...

  8. Linux 系统报错 rcu_preempt detected stalls on CPUs/tasks

    说在前面的一些废话: 这是什么错误我不知道,为什么出现我不知道! 那为什么还要把他写出来了,只是因为这个错误遇到了,而且浪费了我很多时间和精力. 故事留给自己看,解决办法就是,重新升级一下Linux系 ...

  9. 适用于移动设备弹性布局的js脚本(rem单位)

    背景介绍 目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆.以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用 ...

  10. mysql5.7基于gtid的主从复制

    两个节点:mkdir -p /data/mysql-5721/datamkdir -p /data/mysql-5721/innodbmkdir -p /data/mysql-5721/replica ...