微信端的定位

本人最近在开发微信端的H5页面，需要做一个线下门店定位和导航的功能。

查阅资料发现，微信内嵌接口目前只能定位，不支持导航，所以需要引用百度、高德或者腾讯等地图来进行导航。

以下是本人为实现在微信端定位功能做的一些尝试，不足之处，还望大家不吝赐教！

1. H5 定位 + 腾讯地图显示位置

参考腾讯地图官网的H5定位和纠偏的方法   HTML5定位于纠偏

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
<script>
    //H5 定位功能
    function getLocation() {
        //判断是否支持 获取本地位置
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
            alert("支持H5定位！");
        }
        else { x.innerHTML = "浏览器不支持定位."; }
    }
    function showPosition(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        alert('经度：' + lat + '，纬度：' + lng);
        //调用地图命名空间中的转换接口   type的可选值为 1:GPS经纬度，2:搜狗经纬度，3:百度经纬度，4:mapbar经纬度，5:google经纬度，6:搜狗墨卡托
        qq.maps.convertor.translate(new qq.maps.LatLng(lat, lng), 1, function (res) {
            alert("腾讯地图！");
            //取出经纬度并且赋值
            latlng = res[0];


            var map = new qq.maps.Map(document.getElementById("container"), {
                center: latlng,
                zoom: 13
            });
            //设置marker标记
            var marker = new qq.maps.Marker({
                map: map,
                position: latlng
            });
        });
    }


    function showError(error)
    {
        switch(error.code) 
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                break;
        }
    }
</script>
<style>
    #container {
        height: 100%;
        width: 100%;
        border: 1px solid #000;
    }
</style>
<div id="container" οnclick="getLocation();">点我定位！</div>

上述代码在安卓端测试有效，苹果手机无法获取位置，不明原因的我马上又去找万能的网友，以下是测试找错的代码：
参考资料  让HTML5来为你定位（转）
使用下面这段代码测试H5定位功能，安卓手机测试有效，苹果手机error.code = 2  error.POSITION_UNAVAILABLE

navigator.geolocation.getCurrentPosition(geo_success, geo_error);
        function geo_success(position) {
            alert('经度：' + position.coords.latitude, '，纬度：' + position.coords.longitude);
        }


        function geo_error(msg) {
            alert(msg.code, msg.message);
        }

使用Geolocation方法存在错误信息error.POSITION_UNAVAILABLE其实问题不局限于微信端而是iphone升级到ios10后，对获取地理位置信息作出了限制，只有https的方式才能获取 

参考资料 ： iphone手机微信端html5 Geolocation定位失效的问题

2. 腾讯地图定位当前位置

用腾讯地图的api可以直接获取，安卓和苹果手机亲测有效，代码如下：

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script> 
        var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
        if (geolocation) {
            var options = { timeout: 8000 };
            geolocation.getLocation(showPosition, showErr, options);           
        } else {
            alert("定位尚未加载");
        }
        function showPosition(position) {
            console.log("我的定位：" + position);            
            var current = new qq.maps.LatLng(position.lat, position.lng);
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: current,
                zoom: 13
            });


            // 设置marker标记
            var marker = new qq.maps.Marker({
                map: map,
                position: current
            });
                      
        }
        function showErr(err) {
            //所有可能的错误  
            alert(err);
        }        
</script>

3.  直接调用微信定位接口定位 （仅供参考，测试没有成功，还未找到原因）
由于本人还不是非常熟悉微信参数接口的一些操作，在读到微信相关配置参数后，在微信端似乎并没有调用到微信定位的接口方法，以下代码仅供参考，错误的地方希望大家可以指点一二

<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script>
<script>
    $(function () {
        $.ajax({
            url: '../../Weixin/Sign?t=' + new Date().toString(),
            type: 'get',
            dataType: 'json',
            data: { url: encodeURI(window.location.href.split('#')[0]), userid: sessionStorage.getItem("UserID") },
            async: false,
            success: function (data) {
                if (data.success) {
                    var op = JSON.parse(data.msg);

                    //获取微信配置参数
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出                                       //，仅在pc端时才会打印。
                        appId: op.appid, // 必填，公众号的唯一标识
                        timestamp: op.timestamp, // 必填，生成签名的时间戳
                        nonceStr: op.nonceStr, // 必填，生成签名的随机串
                        signature: op.signature,// 必填，签名，见附录1
                        jsApiList: ['openLocation', //使用微信内置地图查看地理位置接口  
                                    'getLocation'   //获取地理位置接口  
                        ],  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        success: function (res) {
                            alert("检测通过：" + res);
                        },
                        fail: function (res) {
                            alert("检测失败：" + res);
                        },
                        complete: function (res) {
                            alert("检测结束");
                        }
                    });

                    wx.ready(function () {

                        // 查看地理位置
                        wx.openLocation({
                            latitude: 23.099994,   // 纬度，浮点数，范围为90 ~ -90
                            longitude: 113.324520, // 经度，浮点数，范围为180 ~ -180
                            name: 'TIT 创意园',     // 位置名
                            address: '广州市海珠区新港中路 397 号', // 地址详情说明
                            scale: 14,             // 地图缩放级别,整形值,范围从1~28。默认为最大
                            infoUrl: 'http://weixin.qq.com'  // 在查看位置界面底部显示的超链接,可点击跳转
                        });

                        // 获取当前地理位置
                        wx.getLocation({
                            success: function (data) {                             
                                var latitude = data.latitude;
                                var longitude = data.longitude;
                                var speed = data.speed;
                                var accuracy = data.accuracy;
                                alert('经度：' + latitude + '，纬度：' + longitude);
                            }
                        });

                    });
                   
                }

            }
        });
});
</script>