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

 更新时间:2019年07月10日 11:38:47   作者:无枉少年  
这篇文章主要介绍了微信小程序把百度地图坐标转腾讯地图坐标过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

百度地图的经纬度放到腾讯地图里面解析地址,导致位置信息显示不正确,所以利用腾讯地图提供的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实现百度搜索框效果

    这篇文章主要为大家详细介绍了JavaScript实现百度搜索框效果 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • uni-app实现NFC读取功能

    uni-app实现NFC读取功能

    这篇文章主要为大家详细介绍了uni-app实现NFC读取功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • javascript function、指针及内置对象

    javascript function、指针及内置对象

    该文摘自于匿名教程总结,希望对初学js的同学有帮助,因为它解决了我学习js的众多迷惑。。。
    2009-02-02
  • 使用JavaScript实现轮播图效果完整实例

    使用JavaScript实现轮播图效果完整实例

    我们在各种网页中经常见到轮播图的效果,下面这篇文章主要给大家介绍了关于使用JavaScript实现轮播图效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    这篇文章主要介绍了基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • js中join()方法举例详解

    js中join()方法举例详解

    这篇文章主要给大家介绍了关于js中join()方法的相关资料,join方法用于把数组中的所有元素放入一个字符串,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • js如何实现淡入淡出效果

    js如何实现淡入淡出效果

    这篇文章主要介绍了原生js如何实现淡入淡出效果,文章为大家提供了一个已经封装好的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 网络复制内容时常用的正则+editplus

    网络复制内容时常用的正则+editplus

    有时侯我们在拷贝网页上的内容的时候,总是有一些,开头的数字,需要替换掉
    2006-11-11
  • uni-app微信小程序登录授权的实现

    uni-app微信小程序登录授权的实现

    这篇文章主要介绍了uni-app微信小程序登录授权的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Bootstrap基本样式学习笔记之表格(2)

    Bootstrap基本样式学习笔记之表格(2)

    Bootstrap提供了一个清晰的创建表格的布局,这篇文章主要介绍了Bootstrap学习笔记之表格基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论