2018-05-15

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sfP3Tzge9Y7AMsAqRUb4tSPSMu24KYQb"></script>

(这里引用百度地图的js ,要在百度api申请秘钥)


wx.config({

        //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

        //appId: '', // 必填,公众号的唯一标识

        //timestamp: , // 必填,生成签名的时间戳

        //nonceStr: '', // 必填,生成签名的随机串

        //signature: '',// 必填,签名

@Html.Raw(ViewBag.wxJsApiParam) //这里是.net 的后台直接输出以上所需要的json 

        jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表

    });

   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。

                var speed = res.speed; // 速度,以米/每秒计

                var accuracy = res.accuracy; // 位置精度

bdLocationAddress(longitude, latitude); //这里是通过微信获取经纬度

                //alert("经度:" + longitude + "纬度:" + latitude);

                //经度:113.2381

                //纬度:23.1949

                //转换后

                //var x = 113.24997769358316;

                //var y = 23.198141278002385;

            }

        });

    });

    function bdLocationAddress(x, y) {

        //以下获取地理位置

        // 百度地图API功能

        //GPS坐标

        //var x = 113.2381;

        //var y = 23.1949;

var ggPoint = new BMap.Point(x, y);//将微信获取的经纬度转换成百度的经纬度,才可以用实际的位置去显示

        //地图初始化

        //var bm = new BMap.Map("allmap");

 distance(x, y);//这里将转换后的中心点坐标作为参数回调计算两点之间的距离

        //坐标转换完之后的回调函数

        translateCallback = function (data) {

            if (data.status === 0) {

                var marker = new BMap.Marker(data.points[0]);

                //返回位置

                var geoc = new BMap.Geocoder();

                var pt = new BMap.Point(marker.point.lng, marker.point.lat);

                geoc.getLocation(pt, function (rs) {

$(".locationAddress").text(rs.surroundingPois[0].title);//取出第0个json数据的title就是当前的所在位置

                }, { poiRadius: 300, numPois: 1 });

            }

        }

        var convertor = new BMap.Convertor();

        var pointArr = [];

        pointArr.push(ggPoint);

        convertor.translate(pointArr, 1, 5, translateCallback)

    }

function distance(x1, y1) {

        var list = $(".getPoint");

        var map = new BMap.Map("allmap");

var pointA = new BMap.Point(x1, y1);;//这里是由微信坐标转换为百度地图坐标的中心点的位置

        for (var i = 0, x2, y2; i <= list.length; i++) {

x2 = $(list[i]).attr("data-longitude");//后台返回的百度地图的经度

y2 = $(list[i]).attr("data-latitude");;//后台返回的百度地图的纬度

            //map.centerAndZoom("重庆", 12);  //初始化地图,设置城市和地图级别。

              // 创建点坐标A--大渡口区

var pointB = new BMap.Point(x2, y2); //这里是后台返回的各个店铺的坐标位置

var value = map.getDistance(pointA, pointB) <= 1000 ? parseInt(map.getDistance(pointA, pointB)) + '米' : (map.getDistance(pointA, pointB)/1000).toFixed(1) + 'Km';//获取各个店铺到中心点的距离

$(".distance:eq("+i+") ").html(value)//将值放入对应的html

   //alert((map.getDistance(pointA, pointB)).toFixed(2) + ' 米。')//获取两点距离,保留小数点后两位

        }

    }

    //$(function () {

    //    distance(113.2499994, 23.19860)

    //})




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1Geolocation简介 HTML5 Geolocation(地理定位)用于定位用户的位置。 1.1定位用户的...
    Kevin_Junbaozi阅读 1,389评论 0 1
  • 六级作文万能模板 辩论式议论文模板 辩论式议论文模板(一) Some people believe (argue,...
    BugWang阅读 527评论 0 1
  • (关键词:逻辑层(service)和数据访问层(Dao) Unitils、Spring测试框架、UnitilsJU...
    Aubade阅读 5,560评论 0 0
  • 课外撰(小说) 2018原创热血 备注:课外撰(小说) 类型:历史,军事,意识,重生,原创,战斗,悬疑,...
    阿甘隐传阅读 591评论 0 0
  • 喜欢许嵩的歌,是因为一首《断桥残雪》,唯美的歌词,略带忧伤的旋律。因为反复地听,反复地唱,我对这个词也有了一点自己...
    凡心尘语阅读 1,280评论 12 8