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


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 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
JS数据类型分类及常用判断方法
Nov 19 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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
学习python (1)
2006/10/31 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
python numpy库np.percentile用法说明
2020/06/08 Python
计算机专业自荐信
2013/10/14 职场文书
期末自我鉴定
2014/02/02 职场文书
导游词之河北野三坡
2019/12/11 职场文书
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android