微信小程序腾讯地图定位转高德地图定位

这篇具有很好参考价值的文章主要介绍了微信小程序腾讯地图定位转高德地图定位。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

0.问题起因

微信小程序获取到了当前用户的定位,需要在高德地图上进行渲染。
发现正常渲染后,偏差几百米。

1.安装依赖

 npm i -S coordtransform

2.引入

这里图方便,直接丢到window上了

import coordtransform from 'coordtransform';
window.coordtransform = coordtransform 

3.使用

这里演示“腾讯地图”转“高德地图”文章来源地址https://www.toymoban.com/news/detail-823691.html

  wx.getLocation({  
          type: 'wgs84',  
          success: function(res) {  
               console.log('获取到定位',res)
               if(res.latitude && res.longitude){
                let poiArr = window.coordtransform.wgs84togcj02(res.longitude,res.latitude);
                  console.log('获取到定位',poiArr)
                  localStorage.setItem('ychs_poi',poiArr)
               }else{
                  // 未获取
                  // alert('请授权定位信息')
               }
                // alert(res.latitude + " ," + res.longitude  )
          },  
          fail: function(error) {  
              console.log(error);  
              // alert('请授权定位信息获取完整的服务')
              console.log('授权定位失败')
          }  
  });  

到了这里,关于微信小程序腾讯地图定位转高德地图定位的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)

    创建容器 地图家长 在H5页面引入 //res.wx.qq.com/open/js/jweixin-1.6.0.js ,建议使用高版本; 点击返回按钮 调用微信小程序和H5通用API 判断是否在微信小程序环境中 地图调起,再次返回小程序页 获取H5传递参数的方式为: console.log(options) latitude和longitude必须为数字类型,不支持字符

    2024年02月07日
    浏览(94)
  • 关于微信小程序调用H5腾讯地图API获取定位信息提示失败问题--解决办法之一

    在跳转到H5页面加载腾讯地图API获取定位信息时,“真机调试”、“开发模式”都可以使用 web-view 组件访问我需要的路径。只有“体验版”、“线上版本”会出现这个错误提示。正常加载都是正常的,但是因为腾讯地图API在获取定位信息的同时,会在页面上内嵌一个隐藏的

    2024年04月26日
    浏览(61)
  • 【uniapp小程序实战】—— 使用腾讯地图获取定位

    本篇文章分享一下我在实际开发小程序时遇到的需要获取用户当前位置的问题,在小程序开发过程中经常使用到的获取定位功能。uniapp官方也提供了相应的API供我们使用。 官网地址:uni.getLocation(OBJECT)) uni.getLocation(OBJECT) 获取当前的地理位置、速度。 OBJECT 参数说明 参数名 类

    2024年02月03日
    浏览(60)
  • 高德地图实现-微信小程序地图导航

    1、在高德开放平台注册成为开发者 2、申请开发者密钥(key)。 3、下载并解压高德地图微信小程序SDK 注册账号(https://lbs.amap.com/)) 申请小程序应用的 key 应用管理(https://console.amap.com/dev/key/app)) - 我的应用 - 创建新应用 生成的 key 即可用在程序中 下载相关 sdk 文件,导入 amap-

    2024年02月08日
    浏览(75)
  • 微信小程序,高德地图

    高德开放平台: 注册账号(https://lbs.amap.com/) 去高德地图平台申请小程序应用的 key 应用管理(https://console.amap.com/dev/key/app) - 我的应用 - 创建新应用 生成的 key 即可用在程序中 下载相关 sdk 文件,导入 amap-wx.js 到项目中:https://lbs.amap.com/api/wx/download 创建 AMapWX 对象 api getRegeo 获取

    2024年02月09日
    浏览(58)
  • 微信小程序---高德地图(一)

    微信小程序调用高德API,实现高德地图地位功能。 入门指南-微信小程序插件|高德地图API (amap.com) 登录控制台 登录高德开发平台控制台(高德开放平台 | 高德地图API) ,进行注册登录。  创建新应用 进入应用管理,创建新应用。  创建Key 点开新应用,新应用中添加 key,服

    2024年02月05日
    浏览(88)
  • 微信小程序引入高德地图Demo 快速上手

    本文参照官方文档进行编写 最后引入官方实例 最终效果 ` 注册账号 https://lbs.amap.com/?ref=http%3A%2F%2Flbs.amap.com%2Fdev%2F#/ 获取Key教程 https://lbs.amap.com/api/wx/guide/create-project/get-key/ 访问网址 https://github.com/amap-demo/wx-regeo-poiaround-weather 下载微信小程序实例 用微信开发者工具打开 打开

    2024年02月11日
    浏览(79)
  • 微信小程序---- 外卖小程序查看实时地图路线(骑手端&用户端)【高德地图】

    前言:1. 在小程序中需要使用map组件,文档链接:https://developers.weixin.qq.com/miniprogram/dev/component/map.html 2.使用的是高德地图,所以需要引进相关的js,下载链接:https://lbs.amap.com/api/wx/download 3.去往高德官方申请需要用的key,操作链接:https://lbs.amap.com/api/wx/guide/create-project/get-key

    2024年02月16日
    浏览(60)
  • 【微信小程序】微信小程序集成高德卫星地图完成多边形绘制与截图保存

    目录 功能需求 使用的技术点 注意点 实现步骤 代码 微信小程序-地图所在的wxml 微信小程序-地图所在的js 微信小程序-展示截图结果的wxml 微信小程序-展示截图结果的js H5-地图所在的html 完成效果  参考文档 感谢阅读,欢迎讨论 打开页面展示卫星地图,用户自行在地图上绘制

    2024年02月06日
    浏览(199)
  • uniapp---- 微信小程序中获取当前地理位置(高德地图)

    1.在manifest.json中选择微信小程序配置,勾选上位置接口。 2.在manifest.json中选择源码视图,添加permission和requiredPrivateInfos 3.进入微信公众平台添加合法域名(不能少但是可以放在最后添加,调试期间可以打开开发者工具的不校验合法域名) 4.下载amap-wx.130.js,并且进行引用,

    2024年02月12日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包