微信小程序把百度地图坐标转换成腾讯地图坐标过程详解


Posted in Javascript onJuly 10, 2019

百度地图的经纬度放到腾讯地图里面解析地址,导致位置信息显示不正确,所以利用腾讯地图提供的API进行转换。
如果没有开发密钥(key),就到腾讯地图官方文档进行申请和下载qqmap-wx-jssdk.js

腾讯地图官方文档

申请步骤

微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

填写信息

微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

wxml代码

<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-location bindmarkertap='map_details' scale="16" bindtap='open_map_details'>
 </map>

js代码

// 引入SDK核心类
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');


//百度经纬度转换腾讯经纬度
 reverseLocation: function() {
  var that = this;
  // 实例化API核心类
  var demo = new QQMapWX({
   key: '申请的开发密钥'
  });
  // 调用接口
  demo.reverseGeocoder({
   location: {
    latitude: that.data.latitude,
    longitude: that.data.longitude
   },
   coord_type: 3, //baidu经纬度
   success: function(res) {
    var latitude = res.result.ad_info.location.lat;
    var longitude = res.result.ad_info.location.lng;
    var markers = [{
     iconPath: '../../../images/common/location.png',
     longitude: longitude,
     latitude: latitude,
     id: "map",
    }]
    console.log(markers)
    that.setData({
     markers: markers,
     latitude: latitude,
     longitude: longitude
    })
   },
   fail: function(error) {    
    console.error(error);   
   },
   complete: function(res) {    
    console.log(res); 
   }
  });
 },

微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

日常笔记!个人项目亲测可行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js拦截alert对话框另类应用
Jan 16 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 #Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 #Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 #Javascript
js Array.slice的8种不同用法示例
Jul 10 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
珊瑚虫IP库浅析
2007/02/15 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
FCK调用方法..
2006/12/21 Javascript
js left,right,mid函数
2008/06/10 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python使用爬虫猜密码
2016/02/19 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
团支部推优材料
2014/05/21 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis