2016-10-14 11:37:44 qq_34469943 阅读数 5651
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27853 人正在学习 去看看 秦子恒

其实获取微信经纬度,很简单根据我前面的第一篇可以了解到进入要获取微信经纬度的页面时,我们只要先页面授权得到签名就可以了!

这里得到签名的方法网上很多,也可以看我的第一篇文档,直接复制就可以用了!

代码:
</pre><pre class="html" name="code"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>获取微信经纬度</title>
<!-- 微信 js-sdk -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</style>
</head>
<body>
<br>
<div class="container">
   	<div class="form-group" >
				<label for="firstname" class="col-sm-2 control-label">地址:</label>
				<div class="col-sm-10" id="item-ifo">
					<input type="text" value="" class="form-control" name="location.address"
						id="address" placeholder="正在获取地理位置" tabindex="1" autocomplete="off"/>
					<div class="i-name ico" id="i-name"></div> 	
				</div>
	</div>
 </div>
</body>
<script type="text/javascript">
	//alert(location.href.split('#')[0]);得到确定授权页面地址<pre class="html" name="code">	//config接口权限配置  下面的如何得到参数可以看第一篇文档  或者---加群93472007咨询 (大神很多)
	wx.config({
		beta : true, // 开启内测接口调用,注入wx.invoke方法
		debug : false, // 开启调试模式
		appId : '${config.appId}', // 第三方app唯一标识
		timestamp : '${config.timestamp}', // 生成签名的时间戳
		nonceStr : '${config.nonce}', // 生成签名的随机串
		signature : '${config.signature}',// 签名
		jsApiList : [
		//添加使用的函数 ---这里的函数调用微信有说明
		'checkJsApi', 'openLocation', 'getLocation' ]
	});
	wx.checkJsApi({
		jsApiList : [ 'getLocation' ],
		success : function(res) {
			//alert(JSON.stringify(res));
			// alert(JSON.stringify(res.checkResult.getLocation));
			if (res.checkResult.getLocation == false) {
				alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
				return;
			}
		}
	});

	var latitude;
	var longitude;
	var speed;
	var accuracy;
	//ready权限验证 --正确就得到微信经纬度
	wx.ready(function() {
		wx.invoke('getLocation', 'openLocation', {}, function(res) {
			//alert(res.err_msg + "唯一");
		});
		wx.getLocation({
			success : function(res) {
				latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
				longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
				speed = res.speed; // 速度,以米/每秒计
				accuracy = res.accuracy; // 位置精度
				//alert(latitude);
				//alert(longitude);submitOrderInfoClick();
			},
			cancel : function(res) {
				alert('用户拒绝授权获取地理位置');
			}
		});
	});
	wx.error(function(res) {
		alert("验证出错");
	});
	//这个事件是得到微信经纬度去后台获取百度经纬度,google经纬度或者其它的经纬度,要知道微信经纬度是gps的和我们要使用的地图定位不一样所以这里我们需要转化	//转化 1.可以通过页面转化得到你要的地图经纬度-并且得到地址详情	//转化 2.和我一样不喜欢写前台,可以直接在后台中得到 (目的都是一样的)
	function submitOrderInfoClick() {
		//alert(latitude);
		//alert(longitude);
		var url = "/task/details";
		$.post(url, {
			latitude : latitude,
			longitude : longitude
		}, function(data) {
			if (data != null) {
				var json = eval(data);
				$("#address").val(json[1]);
				$("#locationname").val(json[2]);
			} else {
				alert("获取地理位置失败是否重新获取");
			}
		});
	}
</script>
</html>

这里的是得到微信的信息之后我们进入后台!
代码:
// 得到详情地址
	@ResponseBody
	@RequestMapping(value = "/details", method = RequestMethod.POST)
	public String details(Map<String, Object> model, HttpSession session) {
		String latitude = request.getParameter("latitude");
		String longitude = request.getParameter("longitude");
		System.out.println(latitude);
		System.out.println(longitude);
		if (latitude!=null & longitude!=null) {
			double lat = Double.valueOf(latitude).doubleValue();
			double lon = Double.valueOf(longitude).doubleValue();

			// 微信是GPS需要转化地图
			Gps gps = new Gps(lat, lon);
			Gps gcj = PositionUtil.gps84_To_Gcj02(gps.getWgLat(), gps.getWgLon());
			String jsonStr = GetLocationMsg.GetLocationMs(gcj.getWgLat(), gcj.getWgLon());

			// 因为嵌套太多先解析
			JSONObject jsonObj = JSONArray.parseObject(jsonStr);
			JSONArray jsonArray = (JSONArray) jsonObj.get("results");
			List list = new ArrayList();// 用list保存全部数据
			for (int i = 0; i < jsonArray.size(); i++) {
				Userdetails user = (Userdetails) JSONObject.toJavaObject(jsonArray.getJSONObject(i), Userdetails.class);
				// System.out.println(user.toString());
				list.add(user.getFormatted_address());
			}
			String json = JSON.toJSONString(list); // list转json
			System.out.println(json);
			// 页面上
			return json;
		}else {
			return null;
		}
		
	}
下面就算相关的类了 positionUtil
package xyz.ibenben.parttime.common.util;

/**
 * 各地图API坐标系统比较与转换;
 * WGS84坐标系:即地球坐标系,国际上通用的坐标系。设备一般包含GPS芯片或者北斗芯片获取的经纬度为WGS84地理坐标系,
 * 谷歌地图采用的是WGS84地理坐标系(中国范围除外);
 * GCJ02坐标系:即火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
 * 谷歌中国地图和搜搜中国地图采用的是GCJ02地理坐标系; BD09坐标系:即百度坐标系,GCJ02坐标系经加密后的坐标系;
 * 搜狗坐标系、图吧坐标系等,估计也是在GCJ02基础上加密而成的。 chenhua
 */
public class PositionUtil {
	
	public static final String BAIDU_LBS_TYPE = "bd09ll";
	
	public static double pi = 3.1415926535897932384626;
	public static double a = 6378245.0;
	public static double ee = 0.00669342162296594323;

	/**
	 * 84 to 火星坐标系 (GCJ-02) World Geodetic System ==> Mars Geodetic System
	 * 
	 * @param lat
	 * @param lon
	 * @return
	 */
	public static Gps gps84_To_Gcj02(double lat, double lon) {
		if (outOfChina(lat, lon)) {
			return null;
		}
		double dLat = transformLat(lon - 105.0, lat - 35.0);
		double dLon = transformLon(lon - 105.0, lat - 35.0);
		double radLat = lat / 180.0 * pi;
		double magic = Math.sin(radLat);
		magic = 1 - ee * magic * magic;
		double sqrtMagic = Math.sqrt(magic);
		dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
		dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
		double mgLat = lat + dLat;
		double mgLon = lon + dLon;
		return new Gps(mgLat, mgLon);
	}

	/**
	 * * 火星坐标系 (GCJ-02) to 84 * * @param lon * @param lat * @return
	 * */
	public static Gps gcj_To_Gps84(double lat, double lon) {
		Gps gps = transform(lat, lon);
		double lontitude = lon * 2 - gps.getWgLon();
		double latitude = lat * 2 - gps.getWgLat();
		return new Gps(latitude, lontitude);
	}

	/**
	 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 将 GCJ-02 坐标转换成 BD-09 坐标
	 * 
	 * @param gg_lat
	 * @param gg_lon
	 */
	public static Gps gcj02_To_Bd09(double gg_lat, double gg_lon) {
		double x = gg_lon, y = gg_lat;
		double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * pi);
		double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * pi);
		double bd_lon = z * Math.cos(theta) + 0.0065;
		double bd_lat = z * Math.sin(theta) + 0.006;
		return new Gps(bd_lat, bd_lon);
	}

	/**
	 * * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 * * 将 BD-09 坐标转换成GCJ-02 坐标 * * @param
	 * bd_lat * @param bd_lon * @return
	 */
	public static Gps bd09_To_Gcj02(double bd_lat, double bd_lon) {
		double x = bd_lon - 0.0065, y = bd_lat - 0.006;
		double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
		double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
		double gg_lon = z * Math.cos(theta);
		double gg_lat = z * Math.sin(theta);
		return new Gps(gg_lat, gg_lon);
	}

	/**
	 * (BD-09)-->84
	 * @param bd_lat
	 * @param bd_lon
	 * @return
	 */
	public static Gps bd09_To_Gps84(double bd_lat, double bd_lon) {

		Gps gcj02 = PositionUtil.bd09_To_Gcj02(bd_lat, bd_lon);
		Gps map84 = PositionUtil.gcj_To_Gps84(gcj02.getWgLat(),
				gcj02.getWgLon());
		return map84;

	}

	public static boolean outOfChina(double lat, double lon) {
		if (lon < 72.004 || lon > 137.8347)
			return true;
		if (lat < 0.8293 || lat > 55.8271)
			return true;
		return false;
	}

	public static Gps transform(double lat, double lon) {
		if (outOfChina(lat, lon)) {
			return new Gps(lat, lon);
		}
		double dLat = transformLat(lon - 105.0, lat - 35.0);
		double dLon = transformLon(lon - 105.0, lat - 35.0);
		double radLat = lat / 180.0 * pi;
		double magic = Math.sin(radLat);
		magic = 1 - ee * magic * magic;
		double sqrtMagic = Math.sqrt(magic);
		dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
		dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
		double mgLat = lat + dLat;
		double mgLon = lon + dLon;
		return new Gps(mgLat, mgLon);
	}

	public static double transformLat(double x, double y) {
		double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y
				+ 0.2 * Math.sqrt(Math.abs(x));
		ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
		ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
		ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
		return ret;
	}

	public static double transformLon(double x, double y) {
		double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1
				* Math.sqrt(Math.abs(x));
		ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
		ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
		ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0
				* pi)) * 2.0 / 3.0;
		return ret;
	}

	
	public static void main(String[] args) {
		// 北斗芯片获取的经纬度为WGS84地理坐标 31.426896,119.496145
		Gps gps = new Gps(22.77479,113.73519);
		System.out.println("gps :" + gps);
		Gps gcj = gps84_To_Gcj02(gps.getWgLat(), gps.getWgLon());
		System.out.println("gcj :" + gcj);
		Gps star = gcj_To_Gps84(gcj.getWgLat(), gcj.getWgLon());
		System.out.println("star:" + star);
		Gps bd = gcj02_To_Bd09(gcj.getWgLat(), gcj.getWgLon());
		System.out.println("bd  :" + bd);
		Gps gcj2 = bd09_To_Gcj02(bd.getWgLat(), bd.getWgLon());
		System.out.println("gcj :" + gcj2);
	}
}

我这里先用google的地图 有空再加百度的!其实百度的地图定位不是很好! getlocationMSG类
package xyz.ibenben.parttime.common.util;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

/**
 * google地图得地址详情
 * @author admin
 *
 */
public class GetLocationMsg {

	public final static void main(String[] args) {
		
		 /*//String jsonStr = GetLocationMs(22.329157, 114.203258);
		JSONObject jsonObj = JSONArray.parseObject(jsonStr);
		JSONArray jsonArray = (JSONArray) jsonObj.get("results");
		System.out.println(jsonArray);
		List list = new ArrayList();// 用list保存全部数据
		for (int i = 0; i < jsonArray.size(); i++) {
			Userdetails user = (Userdetails) JSONObject.toJavaObject(jsonArray.getJSONObject(i), Userdetails.class);
			// System.out.println(user.toString());
				list.add(user.getFormatted_address());
		}
		System.out.println(list);*/
	}

	public static String GetLocationMs(double d, double f) {

		String message = "";

		String url = String.format(

				"http://ditu.google.cn/maps/api/geocode/json?latlng=%s,%s&language=CN",

				d, f);

		URL myURL = null;

		URLConnection httpsConn = null;

		try {

			myURL = new URL(url);

		} catch (MalformedURLException e) {

			e.printStackTrace();

		}

		try {

			httpsConn = (URLConnection) myURL.openConnection();

			if (httpsConn != null) {

				InputStreamReader insr = new InputStreamReader(

						httpsConn.getInputStream(), "UTF-8");

				BufferedReader br = new BufferedReader(insr);

				String data = null;

				while ((data = br.readLine()) != null) {

					message = message + data;

				}

				insr.close();

			}

		} catch (IOException e) {

			e.printStackTrace();

		}

		return message;

	}

}

这个是解析的类
/**
 * json 类
 * @author Administrator
 *
 */
public class Userdetails {

	private String place_id;
	private String formatted_address;
	private String long_name;
	private String short_name;
	private String types;
	private String geometry;

	@Override
	public String toString() {
		return "User{" + "formatted_address='" + formatted_address + '\'' + "" + ",geometry='" + geometry + '\''
				+ ",types='" + types + '\'' + '}';
	}

	public String getLong_name() {
		return long_name;
	}

	public void setLong_name(String long_name) {
		this.long_name = long_name;
	}

	public String getFormatted_address() {
		return formatted_address;
	}

	public void setFormatted_address(String formatted_address) {
		this.formatted_address = formatted_address;
	}

	public String getShort_name() {
		return short_name;
	}

	public void setShort_name(String short_name) {
		this.short_name = short_name;
	}

	public String getPlace_id() {
		return place_id;
	}
	public void setPlace_id(String place_id) {
		this.place_id = place_id;
	}
	public String getTypes() {
		return types;
	}
	public void setTypes(String types) {
		this.types = types;
	}
	public String getGeometry() {
		return geometry;
	}
	public void setGeometry(String geometry) {
		this.geometry = geometry;
	}

}

经纬度类
/**
* 经纬度类
* 
* @author Administrator
*
*/
public class Gps {

private double wgLat;
private double wgLon;

public Gps(double wgLat, double wgLon) {
setWgLat(wgLat);
setWgLon(wgLon);
}

public double getWgLat() {
return wgLat;
}

public void setWgLat(double wgLat) {
this.wgLat = wgLat;
}

public double getWgLon() {
return wgLon;
}

public void setWgLon(double wgLon) {
this.wgLon = wgLon;
}

@Override
public String toString() {
return wgLat + "," + wgLon;
}
}




到这一步我们就看也在页面得到用户的地址信息了


2019-03-16 15:36:05 weixin_42272544 阅读数 450
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27853 人正在学习 去看看 秦子恒

微信小程序之获取当前地理位置及通过地理位置获取经纬度

一、准备工作

  1. 获取腾讯位置服务,按步骤嫩好:申请密钥页面,上面有个控制台,在左边有个key管理,创建密钥即可。
    在这里插入图片描述

二、获取当前地理位置

话不多说,直接上代码,操作起来

  1. 在js中导入下好的sdk
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
  1. 页面加载时初始化一下
onLoad: function () {
    qqmapsdk = new QQMapWX({
      key: 'xxx-xxx-xxx-xxx-xxx' //这里自己的secret秘钥进行填充
    });
  },
  1. 获取地理位置授权,先不用看下面的代码,我说一下思路。获取地理位置最关键的一步就是调用腾讯sdk接口,这个接口只要有经纬度,就可以获取到地址;而这个地址可以通过wx.getLocation直接得到;然后就是一个简单的逻辑顺序了:获取授权=>点击允许,授权成功的同时调用wx.getLocation方法=>获取到经纬度后传给腾讯sdk接口 OK。
// 获取当前地理位置
  getLocal: function (latitude, longitude) {
    let that = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log(res);
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city
        let address = res.result.address
        that.setData({
          province: province,
          city: city,
          latitude: latitude,
          longitude: longitude,
          address: address
        })

      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },
// 微信获得经纬度
  getLocation: function () {
    let that = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(JSON.stringify(res))
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy;
        that.getLocal(latitude, longitude)
      },
      fail: function (res) {
        console.log('fail' + JSON.stringify(res))
      }
    })
  },
//获取当前位置
  getUserLocation: function() {
    var that = this;
    wx.getSetting({
      success: (res) => {
        console.log(JSON.stringify(res))
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置,请确认授权',
            success: function(res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function(dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权,调用wx.getLocation的API
                      that.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          that.getLocation();
        } else {
          //调用wx.getLocation的API
          that.getLocation();
        }
      }
    })
  },

三、通过地址获取经纬度

同样要用到key和微信小程序JavaScriptSDK,没有的同学看一下准备工作,
下面直接操作,上面写过的同学就不用写了

  1. 在js中导入下好的sdk
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
  1. 页面加载时初始化一下
onLoad: function () {
    qqmapsdk = new QQMapWX({
      key: 'xxx-xxx-xxx-xxx-xxx' //这里自己的secret秘钥进行填充
    });
  },
  1. 用户输入完地址后直接调用sdk解析坐标
<input bindblur='autoGetLocation'></input>
//通过地理位置获取经纬度
  autoGetLocation(e) {
    qqmapsdk.geocoder({
      address: e.detail.value,
      success: function(res) {
        
      },
      complete: res => {
        console.log(res.result.location)
      }
    })
  }

四、注意

之前忘记说了,这边调用wx.getLocation需要用户授权,就要在app.json中配置一下

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

收工

2019-11-01 09:25:49 qq_43764578 阅读数 99
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27853 人正在学习 去看看 秦子恒

微信小程序使用腾讯位置服务获取经纬度或省市区

官方文档:https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html


根据经纬度获取省市区

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '去官方文档可以申请自己的密钥' // 必填
});
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var latitude = '37.94036'// 纬度,浮点数,范围为90 ~ -90
    var longitude = '112.48699' // 经度,浮点数,范围为180 ~ -180
    //根据经纬度获取所在城市
    qqmapsdk.reverseGeocoder({
      location: { latitude: latitude, longitude: longitude },
      success: function (res) {
        console.log('省市区:', res.result.address)
      }
    });
  },

根据地址获取经纬度
.js

//腾讯地图
  formSubmit(e) {
    var _this = this;
    //调用地址解析接口
    qqmapsdk.geocoder({
      //获取表单传入地址
      address: e.detail.value.geocoder, //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号'
      success: function (res) {//成功后的回调
        console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        _this.setData({ // 获取返回结果,放到markers及poi中,并在地图展示
          markers: [{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            width: 20,
            height: 20,
          }],
          poi: { //根据自己data数据设置相应的地图中心坐标变量名称
            latitude: latitude,
            longitude: longitude
          }
        });
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    })
  },

.wxml

<!--地图容器-->
<!--longitude及latitude为设置为调转到指定地址位置,默认不显示-->
<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}"
    scale='16' show-location>
</map>
<!--form表单-->
<form bindsubmit="formSubmit">
    <!--地址描述输入框,示例:北京市海淀区彩和坊路海淀西大街74号-->
    <input style="border:1px solid #000;" name="geocoder"></input>
    <!--提交表单数据-->
    <button form-type="submit">地址解析</button>
</form>
<!--地址描述经纬度展示-->
<view>地址纬度:{{poi.latitude}}</view>
<view>地址经度:{{poi.longitude}}</view>
<view bindtap="dinsx">地址</view>

有什么问题欢迎评论留言,我会及时回复你的

2017-02-13 21:03:51 u012355401 阅读数 1998
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27853 人正在学习 去看看 秦子恒

之前搞微信二次开发遇见过一个超级大坑, 根据微信提供的接口, 获取到的经纬度, 不知道是什么坐标系的(ps: 各个地图使用的坐标系不一, 自行百度), 我把得到的经纬度放到百度.腾讯.高德地图里, 得到的位置都有很大的偏差, 后来绞尽脑汁, 发帖加群各种求助, 无意间发现一篇文章, 特此分享一下, 以防以后有人遇到同样的问题不用像我一样彷徨.

这是原文 微信如何根据经纬度坐标查询具体地理位置

微信获取到的经纬度是GPS坐标, 知道这个一切就好办了, 下一步只要要一个GPS坐标转换的接口就可以了.

我一开始用的上面链接里的接口, 然而用的好好的有一天突然服务挂了, 最后发现他的接口403了.

然后我就找到了下面这个不错的网站, 看他们的合作伙伴还有CSDN, 应该还算靠谱, 从我发现这个网站距今已经快三年了, 它还在, 所以…

废话不多说, 上链接 各种地图接口

2018-12-11 21:02:52 weixin_43720095 阅读数 6474
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27853 人正在学习 去看看 秦子恒

微信小程序中map地图使用——实现获取用户当前位置的经纬度,在地图上产看位置,通过地图获取不同位置的经纬度。

(前提是要弄懂结构及其相关接口)

登录开发工具(包括appid)

微信小程序主体部分: 

新增页面的话进行全局配置:app.json

直接在全局配置输入page代码自动生成页面,也可手动新建。

 

在首页index设置按钮跳转到地理信息页面

视图层

<view class="location" bindtap="locationViewTap">
 <button>地理信息</button>
</view>

 样式层

 

.location{
  display: flex;
}

逻辑层

locationViewTap: function(){
 wx.navigateTo({
  url: '../location/location'
 })
}

结果:

地理信息页面

视图层:

<view wx:if="{{hasLocation==true}}">
<text>纬度:{{ location.latitude }}</text>
<text>经度:{{ location.longitude }}</text>
<text>地方:{{ location.address }}</text>
<text>名字:{{ location.name }}</text>
</view>
<button bindtap="mapViewTap" style="margin:10px">查看地图</button>
<button bindtap="MapView" style="margin:10px">选择位置</button>

样式层

view{
  display: flex;
  flex-direction: column;
}

逻辑层

  data: {
    hasLocation: false,
    location: {
      longitude: "",
      latitude: "",
      name: "",
      address: ""
    }
  },
  mapViewTap: function () {
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        console.log(res)
        wx.openLocation({
          latitude: res.latitude,
          longitude: res.longitude,
          scale: 28
        })
      }
    })
  },
  chooseMapViewTap: function () {
    var that = this
    wx.chooseLocation({
      success: function (res) {
        // success
        console.log(res, "location")
        that.setData({
          hasLocation: true,
          location: {
            longitude: res.longitude,
            latitude: res.latitude,
            address: res.address,
            name: res.name
          },
          detail_info: res.address,
          wd: res.latitude,
          jd: res.longitude
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },

结果:

 

wx.getLocation

wx.chooseLocation

 wx.openLocation

实现结果:

小例子适用初学者,小程序更新快,有些方法,参数或属性会有改变。具体实时关注官方API

没有更多推荐了,返回首页