地图定位三种方式

1基于map.qq.com/api/js

     引入: 参考https://lbs.qq.com/javascript_v2/doc/cityservice.html

<script type="text/javascript" charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY&libraries=convertor"></script>
    //通过微信接口获取经纬度
    function getLocationCity(){
        var citylocation, marker = null;
        //设置城市信息查询服务
        citylocation = new qq.maps.CityService();
        //请求成功回调函数
        citylocation.setComplete(function(result) {
           console.log(result);
        });
        //请求失败回调函数
        citylocation.setError(function() {
            alert("出错了,请输入正确的经纬度!!!");
        });
        citylocation.searchLocalCity();
 
    }

2、基于微信接口

    引入: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

   //通过微信接口获取经纬度
    function getLocationCity(){
        shinoa.request('${ctxPath}/familyWxPayController.do?getJsSdkSign', {
                data : {url:(location.href.split('#')[0])},
                callback : function(result) {
                    var data = result.attributes;
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: data.appId, // 必填,公众号的唯一标识
                        timestamp: data.timestamp, // 必填,生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填,生成签名的随机串
                        signature: data.signature,// 必填,签名
                        jsApiList:  [ 'onMenuShareAppMessage','openLocation', 'getLocation']
                    });
                    wx.ready(function () {
                        wx.checkJsApi({
                            jsApiList: ['getLocation'],
                            success: function (res) {
                                if (res.checkResult.getLocation == false) {
                                    alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
                                    return;
                                }
                            }
                        }); 
                        wx.error(function(res){
                           alert("接口调取失败")
                        });
                        wx.getLocation({
                          success: function (res) {
                              var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                              var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                              var speed = res.speed; // 速度,以米/每秒计
                              var accuracy = res.accuracy; // 位置精
                          },
                          cancel: function (res) {
                            alert('用户拒绝授权获取地理位置');
                          }
                        });
                    });
                }
            }); 
    }

3、基于纯javascript:弊端每次都要授权

//地图定位(js直接获取)
    function Location() {
    
    };
    Location.prototype.getLocation = function (callback) {
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        this.callback = Object.prototype.toString.call(callback) == "[object Function]" ?
            callback :
        function (address) {
            alert(address.province + address.city);
            console.log("getocation(callbackFunction) 可获得定位信息对象");
        };
        var self = this;
        if (navigator.geolocation) {
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(function (position) {
                //经度
                var longitude = position.coords.longitude;
                //纬度
                var latitude = position.coords.latitude;
                self.loadMapApi(longitude, latitude);
            }, self.onError, options);
        } else {
            //浏览器不支持geolocation
        }
    };
    Location.prototype.loadMapApi = function (longitude, latitude) {
        var self = this;
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var oScript = document.createElement("script");
oScript.type="text/javascript";oScript.src="http://api.map.baidu.com/getscriptv=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";
        oHead.appendChild(oScript);
        oScript.onload = function (date) {
            var point = new BMap.Point(longitude, latitude);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                self.callback(addComp);
            });
        }
    };
    Location.prototype.onError = function (error) {
        switch (error.code) {
        case 1:
            alert("位置服务被拒绝");
            break;
        case 2:
            alert("暂时获取不到位置信息");
            break;
        case 3:
            alert("获取信息超时");
            break;
        case 4:
            alert("未知错误");
            break;
        }
    };
   var local = new Location();
        local.getLocation(function (res) {
            if(localStorage.area_name){
                $(".col-xs-2.location").find("span").text(localStorage.area_name);    
            }else if(localStorage.city_name){
                $(".col-xs-2.location").find("span").text(localStorage.city_name);    
            }else{
                // 写入本地存储
                localStorage.city_name = res.city;
                localStorage.area_name = "";//区县     
                //根据城市获取城市code和区县code
                shinoa.request('${ctxPath}/family/home.do?getCityCode',{
                        data:{
                            cityName:res.city
                        },
                        callback:function(data){
                        if(data){
                             localStorage.city_code = data.attributes.cityCode;
                             localStorage.area_code ="";
                        }
                    }
                });
            }
           
        }); 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值