微信公众号H5项目中用高德地图实现用户定位（vue）

遇到的问题：用高德官网的方法去定位时发现，ios可以在http的网址定位，而安卓手机只能在https的网址定位，这个也是很奇葩，查了官网文档说，是因为浏览器禁止了非安全域的定位请求。但是我们的站点就是https的，总之就是定位不成功，但是没有解决不了的bug，最后成功定位的实现思路就是，利用公众号开发的api先拿到用户的地理位置，转化为高德的坐标，再添加一个marker来实现

// 定位到用户当前位置handleLocation() {var _this = this;// 公众号开发的apiwx.getLocation({type: "wgs84",success: function(res) {// 用户同意后,将获取的位置基础信息(经度和纬度信息)请求到控制器//控制器中利用高德的api请求返回地理位置信息数据// console.log(res);_this.getLocation(res.latitude, res.longitude);},cancel: function(res) {// alert("用户拒绝授权获取地理位置");_this.$toast({ msg: "拒绝授权获取地理位置会影响功能使用" });}});},getLocation(latitude, longitude) {this.$toast({ msg: "正在定位..." });var _this = this;var lnglat = [longitude, latitude];// 坐标转换,构造点标记AMap.convertFrom(lnglat, 'gps', function(status, result) {console.log("result==>", result);if (result.info === "ok") {var resLnglat = result.locations[0];// 定点的图标var marker = new AMap.Marker({position: resLnglat,icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"});_this.map.add(marker);_this.map.setFitView();}});},

如果在看的你有什么更好的实现方法，欢迎留言交流

微信公众号H5项目中用高德地图实现用户定位（vue）相关推荐

【腾讯位置组件】微信公众号h5 调用腾讯地图组件
预览腾讯地图官方网址代码示例 <template><view></view> </template> <script>export de ...
微信公众号h5实现高德/百度/腾讯地图导航
最近做了个微信公众号h5需求是这样的 1.点击地图进入地图详情 2.地图详情包括开始导航与地图(高德,百度,腾讯)选择,点击开始导航自动跳转该地图app 首先先理一下功能: 1:第一张图是直接显示坐标 ...
Java开源项目—通用CRM管理系统（微信小程序+微信公众号+H5网页+PC管理后台）
前言 CRM(客户关系管理)管理系统是一种用于管理客户关系的软件系统,通过收集.组织和分析客户关系数据,帮助企业更好地了解客户,提高客户满意度,提升客户服务水平,建立长期客户关系,提升企业的销售和服务 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了 1.问题 2.原因这次可能的原因 3.过渡方案 4.解决方案 4.1 配置nginx服务器 4.2 前端打包保留两个版本 ...
微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现
在微信公众号H5里面可能会遇到点击图片预览,还可以放大缩小,微信内置有这个功能可以实现用vue写项目的话,先 cnpm install weixin-js-sdk --save 接着给图片一个点击事 ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...

微信公众号H5项目中用高德地图实现用户定位（vue）

微信公众号H5项目中用高德地图实现用户定位（vue）相关推荐

最新文章

热门文章