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


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工具方法弹出蒙版
May 08 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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个人网站架设连环讲(二)
2006/10/09 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
js实现筛选功能
2020/11/24 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Windows下python3.7安装教程
2018/07/31 Python
Python 处理文件的几种方式
2019/08/23 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python sorted排序方法如何实现
2020/03/31 Python
python绘制汉诺塔
2021/03/01 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
财务会计求职信范文
2015/03/20 职场文书
2015年小学财务工作总结
2015/07/20 职场文书