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


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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jquery 使用简明教程
Mar 05 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
vuex实现简易计数器
Oct 27 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
用Node写一条配置环境的指令
Nov 14 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/04/09 欧美动漫
php 购物车完整实现代码
2014/06/05 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
删除重复数据的算法
2006/11/23 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Python计算字符宽度的方法
2016/06/14 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
英文自我鉴定
2013/12/10 职场文书
出生医学证明样本
2014/01/17 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
音乐学专业求职信
2014/07/22 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
立案决定书范文
2015/06/24 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL