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


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 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
使用vue制作滑动标签
Sep 21 Javascript
js实现上下左右键盘控制div移动
Jan 16 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
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
后勤人员岗位职责
2013/12/17 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
网站创业计划书
2014/04/30 职场文书
雷人标语集锦
2014/06/19 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
一行Python命令实现批量加水印
2022/04/07 Python