getlocation

若直接调用 wx.getLocation获 取定位，当第一次拒绝 或各种原因造成的失败，下一次无法调用，本文可解决此问题 1.app.json添加 "permission": { "scope.userLocation": { "desc": "地图选点需获取您的实时位置" } } 2.在根目录建utils/util.js const app = getApp() import Toast from '@vant/weapp/toast/toast'; var getLocation = function (that) { wx.getLocation({ type: 'gcj02', success: function (res) { // 经纬度 var latitude = res.latitude var longitude = res.longitude wx.chooseLocation({ success: function (res) { console.log(res.name); that.setData({ location: res.name, locationShow:false }) }, }) }, fail: function () { Toast.fail("授权失败"); } }) } module.exports = { getLocation

H5定位终极解决方案 背景 做一个H5的微商城，主要在微信内，但也要考虑到其他浏览器。其中，首页需要根据当前用户的经纬度找到距离最近的门店并展示。前端需要做的工作就是获取用户的经纬度然后查询后台接口并渲染页面。 目标与分析 我们的目标是经过封装之后，只需要调用一个方法就可以拿到返回的位置信息。 我们需要做的事情是，针对不同的端（微信H5和其他浏览器环境）封装不同的类，再通过一个方法通过 UA 区分，调用不同环境对应的类获取位置。 在微信内部，经过反复的实践之后，不论是通过原生的 HTML5 定位，还是通过第三方(如百度或腾讯地图) jsapi 获取位置，不仅定位时间长，甚至经常出现定位失败的情况，严重影响用户体验，尤其对于大部分信息流都依赖于用于位置的商城首页来说，是完全无法接受的。所以在微信内我们只有微信 sdk 这一种选择； 而对于浏览器端，通过第三方的地图 jsapi 或定位组件，可以稳定且较快速地获取位置信息，为了与微信内尽量保持一致，我们选择的是腾讯地图 jsapi。 解决方案 Talk is cheap, show me the code. 废话不多说，直接上代码： 在浏览器中，通过腾讯地图jsapi获取位置 1.1 在项目的 html 模版文件中引入腾讯地图 jsapi <!-- index.html --> <script charset="utf-8" src="

H5 定位终极解决方案 背景 做一个 H5 的微商城，主要在微信内，但也要考虑到其他浏览器。其中，首页需要根据当前用户的经纬度找到距离最近的门店并展示。前端需要做的工作就是获取用户的经纬度然后查询后台接口并渲染页面。 目标与分析 我们的目标是经过封装之后，只需要调用一个方法就可以拿到返回的位置信息。 我们需要做的事情是，针对不同的端（微信 H5 和其他浏览器环境）封装不同的类，再通过一个方法通过 UA 区分，调用不同环境对应的类获取位置。 在微信内部，经过反复的实践之后，不论是通过原生的 HTML5 定位，还是通过第三方 ( 如百度或腾讯地图 ) jsapi 获取位置，不仅定位时间长，甚至经常出现定位失败的情况，严重影响用户体验，尤其对于大部分信息流都依赖于用于位置的商城首页来说，是完全无法接受的。所以在微信内我们只有微信 sdk 这一种选择； 而对于浏览器端，通过第三方的地图 jsapi 或定位组件，可以稳定且较快速地获取位置信息，为了与微信内尽量保持一致，我们选择的是腾讯地图 jsapi 。 解决方案 Talk is cheap, show me the code. 废话不多说，直接上代码： 1. 在浏览器中，通过腾讯地图 jsapi 获取位置 1.1 在项目的 html 模版文件中引入腾讯地图 jsapi <!-- index.html --> <script charset

H5定位终极解决方案 背景 做一个H5的微商城，主要在微信内，但也要考虑到其他浏览器。其中，首页需要根据当前用户的经纬度找到距离最近的门店并展示。前端需要做的工作就是获取用户的经纬度然后查询后台接口并渲染页面。 目标与分析 我们的目标是经过封装之后，只需要调用一个方法就可以拿到返回的位置信息。 我们需要做的事情是，针对不同的端（微信H5和其他浏览器环境）封装不同的类，再通过一个方法通过 UA 区分，调用不同环境对应的类获取位置。 在微信内部，经过反复的实践之后，不论是通过原生的 HTML5 定位，还是通过第三方(如百度或腾讯地图) jsapi 获取位置，不仅定位时间长，甚至经常出现定位失败的情况，严重影响用户体验，尤其对于大部分信息流都依赖于用于位置的商城首页来说，是完全无法接受的。所以在微信内我们只有微信 sdk 这一种选择； 而对于浏览器端，通过第三方的地图 jsapi 或定位组件，可以稳定且较快速地获取位置信息，为了与微信内尽量保持一致，我们选择的是腾讯地图 jsapi。 解决方案 Talk is cheap, show me the code. 废话不多说，直接上代码： 1. 在浏览器中，通过腾讯地图jsapi获取位置 1.1 在项目的 html 模版文件中引入腾讯地图 jsapi <!-- index.html --> <script charset="utf-8"

1、话不多说，直接上干货 先来张目录结构 ① index.wxml <view class="retailStore"> <view class="cnaps borderBottom"> <text>所在城市：</text> <text class='m-bbt'>{{province}} {{city}}</text> </view> </view> ②index.js 插入提示: 申请开发者密钥（key）：申请密钥 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0 下载完成后放入utils文件夹下引用即可 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com 测试用的话可以在微信开发工具中选择详情，如下图 //index.js //获取应用实例 const app = getApp(); var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); var qqmapsdk; Page({ data: { province: '', city: '', latitude: '', longitude: '' }, onLoad: function () { qqmapsdk = new QQMapWX({