• 微信定位功能结合百度地图获取用户城市


    需要结合百度地图的API,请先完成这篇文章的流程:《使用百度地图将经纬度转换成具体位置》

    以vuejs为例

    beforeMount () {
                var that = this;
                this.city = '正在定位城市...';
                this.wxapi.getWxConfig({
                    url: window.location.href.split('#')[0]
                }).then(_ => {
                    if (+(_.returnCode) == 0) {
                        // 初始化微信配置
                        wx.config(_.data);
                        // 微信初始化事件
                        wx.ready(function(){
                            // 调用微信定位接口
                            wx.getLocation({
                                type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                                success: function (res) {
                                    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                                    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                                    if (latitude && longitude) {
                                          window.getlocation = function (data) {
                                              Loader.hideAll();
                                              if (data.status == 0) {
                                                  var city = data.result.addressComponent.city
                                                  Toast("定位到当前城市为:" + city);
                                                  that.city = city
                                                  this.$store.state.city = city
                                              } else {
                                                  Toast('地址解析失败,请手动选择城市')
                                                  that.$router.push('/cityselect')
                                              }
                                          }
    
                                          Loader.show('正在定位...');
                                          var o = document.createElement('script');
                                          o.src = `http://api.map.baidu.com/geocoder/v2/?callback=getlocation&location=${latitude},${longitude}&output=json&pois=1&ak=PaY0aQpuk5ypaxL1bGH4y65nbitEd0u3`;
                                          document.documentElement.childNodes[0].appendChild(o);
                                      } else {
                                          Toast('微信定位失败,请手动选择城市')
                                          that.$router.push('/cityselect')
                                      }
                                }
                            });
                        });
                        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
                        wx.error(function(res){
                            that.city = "定位失败,请手动选择城市";
                            Toasrt('微信接口调用失败,请手动选择城市')
                            that.$router.push('/cityselect')
                        });
                    } else {
                        Toast("获取微信配置失败" + _.msg);
                        that.city = "定位失败,请手动选择城市";
                        that.$router.push('/cityselect')
                    }
                })
            }

  • 相关阅读:
    博客园首页CSS模板
    style、currentStyle、getComputedStyle的区别和用法
    createDocumentFragment创建文档碎片节点
    setTimeout里如果有$(this),$(this)指的是谁?
    让ie也兼容placeholder
    eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它
    遮罩层特效(根据鼠标进入离开方向出现)
    jquery之attr和prop区别
    js封装类简单举例
    自动换行 word-break:break-all和word-wrap:break-word
  • 原文地址:https://www.cnblogs.com/CyLee/p/8661724.html
Copyright © 2020-2023  润新知