zoukankan      html  css  js  c++  java
  • 微信,根据经纬度获取当前城市

    浏览器原生跟微信JS-SDK两种方法获取用户经纬度和所在城市的方法
    www.MyException.Cn  网友分享于:2015-09-24  浏览:0次
    
     
    
    浏览器原生和微信JS-SDK两种方法获取用户经纬度和所在城市的方法
    网上找了很多根据经纬度获取城市的文章,没发现特别好用的,于是自己写了一个,包含自带浏览器获取经纬度和微信JS-SDK获取经纬度的方法,获取后并存入localStorage。
     
    参考资料如下
    微信JS-SDK :http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
    百度地图API: http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding
     
    代码
     
    var getLocation = {
    //浏览器原生获取经纬度方法
    	latAndLon: function (callback, error) {
    		var that = this;
    		if (navigator.geolocation) {
    			navigator.geolocation.getCurrentPosition(function (position) {
    					var latitude = position.coords.latitude;
    					var longitude = position.coords.longitude;
    					localStorage.setItem("latitude", latitude);
    					localStorage.setItem("longitude", longitude);
    					var data = {
    						latitude: latitude,
    						longitude: longitude
    					};
    					if (typeof callback == "function") {
    						callback(data);
    					}
    				},
    				function () {
    					if (typeof error == "function") {
    						error();
    					}
    				});
    		} else {
    			if (typeof error == "function") {
    				error();
    			}
    		}
    	},
    
    //微信JS-SDK获取经纬度方法
    	weichatLatAndLon: function (callback, error) {
    		var that = this;
    		var timestamp = new Date().getTime() + "";
    		timestamp = timestamp.substring(0, 10);
    		var ranStr = randomString();
    
    		//微信接口配置
    		wx.config({
    			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    			appId: 'XXXXXXXXXXXXXXXXX', // 必填,公众号的唯一标识
    			timestamp: timestamp, // 必填,生成签名的时间戳
    			nonceStr: ranStr, // 必填,生成签名的随机串
    			signature: 'XXXXXXXXXXXXXXXXX',// 必填,签名,见附录1
    			jsApiList: ['checkJsApi',
    				'getLocation'
    			] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    		});
    
    		//参见微信JS SDK文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
    		wx.ready(function () {
    
    			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; // 位置精度
    					localStorage.setItem("latitude", latitude);
    					localStorage.setItem("longitude", longitude);
    					var data = {
    						latitude: latitude,
    						longitude: longitude
    					};
    					if (typeof callback == "function") {
    						callback(data);
    					}
    				},
    				cancel: function () {
    					//这个地方是用户拒绝获取地理位置
    					if (typeof error == "function") {
    						error();
    					}
    				}
    			});
    
    		});
    		wx.error(function (res) {
    			if (typeof error == "function") {
    				error();
    			}
    		});
    	},
    	//将经纬度转换成城市名和街道地址,参见百度地图接口文档:http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding
    	cityname: function (latitude, longitude, callback) {
    		$.ajax({
    			url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=' + latitude + ',' + longitude + '&output=json&pois=1',
    			type: "get",
    			dataType: "jsonp",
    			jsonp: "callback",
    			success: function (data) {
    				console.log(data);
    				var province = data.result.addressComponent.province;
    				var cityname = (data.result.addressComponent.city);
    				var district = data.result.addressComponent.district;
    				var street = data.result.addressComponent.street;
    				var street_number = data.result.addressComponent.street_number;
    				var formatted_address = data.result.formatted_address;
    				localStorage.setItem("province", province);
    				localStorage.setItem("cityname", cityname);
    				localStorage.setItem("district", district);
    				localStorage.setItem("street", street);
    				localStorage.setItem("street_number", street_number);
    				localStorage.setItem("formatted_address", formatted_address);
    				//domTempe(cityname,latitude,longitude);
    				var data = {
    					latitude: latitude,
    					longitude: longitude,
    					cityname: cityname
    				};
    				if (typeof callback == "function") {
    					callback(data);
    				}
    
    			}
    		});
    	},
    //设置默认城市
    	setDefaultCity: function (callback) {
    		alert("获取地理位置失败!");
    		//默认经纬度
    		var latitude = "31.337882";
    		var longitude = "120.616634";
    		var cityname = "苏州市";
    		localStorage.setItem("latitude", latitude);
    		localStorage.setItem("longitude", longitude);
    		localStorage.setItem("cityname", cityname);
    		localStorage.setItem("province", "江苏省");
    		localStorage.setItem("district", "虎丘区");
    		localStorage.setItem("street", "珠江路");
    		localStorage.setItem("street_number", "88号");
    		localStorage.setItem("formatted_address", "江苏省苏州市虎丘区珠江路88号");
    		var data = {
    			latitude: latitude,
    			longitude: longitude,
    			cityname: cityname
    		};
    		if (typeof callback == "function") {
    			callback(data);
    		}
    	},
    //更新地理位置
    	refresh: function (callback) {
    		var that = this;
    		//重新获取经纬度和城市街道并设置到localStorage
    		that.latAndLon(
    			function (data) {
    				that.cityname(data.latitude, data.longitude, function (datas) {
    					if (typeof callback == "function") {
    						callback();
    					}
    				});
    			},
    			function(){
    				that.setDefaultCity(function(){
    					if (typeof callback == "function") {
    						callback();
    					}
    				});
    			});
    	}
    };
     
     
    调用
     
    //原生浏览器获取经纬度方法
    getLocation.latAndLon(
    	function (data) {
    		//data包含经纬度信息
    		AGG.getLocation.cityname(data.latitude, data.longitude, function (datas) {
    			//datas包含经纬度信息和城市
    		});
    	},
    	function () {
    		AGG.getLocation.setDefaultCity(
    			function (defaultData) {
    				//设置默认城市
    			}
    		);
    	}
    );
    
    
    //微信JS-SDK获取经纬度方法
    getLocation.weichatLatAndLon(
    	function (data) {
    		//data包含经纬度信息
    		AGG.getLocation.cityname(data.latitude, data.longitude, function (datas) {
    			//datas包含经纬度信息和城市
    		});
    	},
    	function () {
    		AGG.getLocation.setDefaultCity(
    			function (defaultData) {
    				//设置默认城市
    			}
    		);
    	}
    );
    

      

  • 相关阅读:
    2021.2.6 日记
    P2168 荷马史诗
    2021寒假集训——数论初步
    2021.2.5 日记
    2021.2.4 日记
    2021.2.3 日记
    堆——学习笔记
    树状数组——学习笔记
    Easy | LeetCode 350. 两个数组的交集 II | 哈希 | 排序+双指针
    Easy | LeetCode 66. 加一 | 模拟
  • 原文地址:https://www.cnblogs.com/muxueyuan/p/7073667.html
Copyright © 2011-2022 走看看