微信定位+腾讯地图导航

　　最近在开发微信时，遇到微信导航的需求，第一思路就是通过微信获得用户的经纬坐标，然后把坐标扔给腾讯地图的API,搞定，结果定位总出现几条街的偏差，在网上查资料，用百度地图的有，但是用腾讯地图的却没找到现成的，经过自己的摸索，现在总结下，自己技术积累，也方便有需要之人。有不足之处，望指出。

首先微信获取地理位置（如何获取这里不敷衍了），要注意这个是异步过程。

其次微信返回的坐标系和腾讯地图的坐标系不是一个回事（自家的产品还搞两套东西，真不知道腾讯怎么想的），如果要微信的坐标在腾讯地图上准确显示，还得经过转换的步骤。这里转换前提知道微信是什么的坐标系，经过测试发现微信用的搜狗经纬度。网上有人说微信根据安卓或IOS分别提供谷歌和GPS的坐标系，经测试并没有那么回事。

背景已说明，以下看代码。

<div class="contain">
    <div class="form-group">  
        <label for="start"class="col-md-3 control-label">起点</label>         
        <div class="col-md-4">
            <select id="start" class="form-control" onchange="calcPlan();">
                <option id="nowPoint" value="">我的位置</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="end" class="col-md-3 control-label">店铺</label>
        <div class="col-md-4">
           <select id="end" class="form-control" onchange="calcPlan();"></select>
        </div>
    </div>
    @*<b>换乘策略：</b>
    <select id="policy" style="display:" onchange="calcPlan();">
        <option value="LEAST_TIME">较快捷
        </option>
        <option value="LEAST_TRANSFER">少换乘
        </option>
        <option value="LEAST_WALKING">少步行
        </option>
        <option value="NO_SUBWAY">不坐地铁
        </option>
    </select>
    <button class="btn btn-primary" id="Navigate">导航</button>*@
    <div class="lsbContent" id="mapContainer">
    </div>
    <div class="lsbContent" id="plans">
    </div>
</div>

 

第三方插件自然少不了文件的引用

<script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script charset="utf-8" src="~/Scripts/Map/qqApi/js.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>

微信获取地理位置代码

wx.getLocation({
       success: function (data) {
                    qq.maps.convertor.translate(new qq.maps.LatLng(data.latitude, data.longitude), 2, function(res) {
                        latlng = res[0];
                        fn(latlng.lng,latlng.lat);//实际处理逻辑
                    });
                }

注：需求关键点是在qq.maps.convertor.translate坐标转换，第二个参数就是服务商坐标系的类型，具体可以参考腾讯地图官网http://lbs.qq.com/javascript_v2/doc/convertor.html

 

这里是2，代表搜狗经纬度，其实经测试其实此处1：GPS经纬度也是等到相同的结果。

在看导航jS代码

var transferService = new qq.maps.TransferService({
            //location: "广州",
            complete: function (result) {
                result = result.detail;
                var start = result.start,
                end = result.end;
                var anchor = new qq.maps.Point(6, 6),
                size = new qq.maps.Size(24, 36),
                start_icon = new qq.maps.MarkerImage('/Content/Image/Map/busmarker.png', size),
                end_icon = new qq.maps.MarkerImage('/Content/Image/Map/busmarker.png', size, new qq.maps.Point(24, 0), anchor);

                start_marker && start_marker.setMap(null);
                end_marker && end_marker.setMap(null);
                start_marker = new qq.maps.Marker({
                    icon: start_icon,
                    position: start.latLng,
                    map: map,
                    zIndex: 1
                });
                end_marker = new qq.maps.Marker({
                    icon: end_icon,
                    position: end.latLng,
                    map: map,
                    zIndex: 1
                });

                transfer_plans = result.plans;
                var plans_desc = [];
                for (var i = 0; i < transfer_plans.length; i++) {
                    //plan desc.  
                    var p_attributes = ['onclick="renderPlan(' + i + ')"', 'onmouseover=this.style.background="#eee"', 'onmouseout=this.style.background="#fff"', 'style="margin-top:-4px;cursor:pointer"'].join(' ');
                    plans_desc.push('<p ' + p_attributes + '><b>方案' + (i + 1) + '.</b>');
                    var actions = transfer_plans[i].actions;
                    for (var j = 0; j < actions.length; j++) {
                        var action = actions[j],
                        img_position;
                        action.type == qq.maps.TransferActionType.BUS && (img_position = '-38px 0px');
                        action.type == qq.maps.TransferActionType.SUBWAY && (img_position = '-57px 0px');
                        action.type == qq.maps.TransferActionType.WALK && (img_position = '-76px 0px');

                        var action_img = '<span style="margin-bottom: -4px;' + 'display:inline-block;background:url(/Content/Image/Map/busicon.png) ' + 'no-repeat ' + img_position + ';width:19px;height:19px"></span>&nbsp;&nbsp;';
                        plans_desc.push(action_img + action.instructions);
                    }
                }
                //方案文本描述
                document.getElementById('plans').innerHTML = plans_desc.join('<br><br>');

                //渲染到地图上
                renderPlan(0);
            }
        });

function InitMap(lng, lat) {
            map = new qq.maps.Map(document.getElementById("mapContainer"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(lat, lng)
            });
            //calcPlan();
        }

function GetMyLnglatCallback(lng, lat) {
            InitMap(lng, lat);
            $("#nowPoint").attr("value", lng + "," + lat);

            InitShopSelectItem()//加载店铺下拉控件数据
            calcPlan();
        }
 //调用calcPlan用来判断出行方式
        function calcPlan() {
            var start_name = document.getElementById("start").value.split(",");
            var end_name = document.getElementById("end").value.split(",");
            //var policy = document.getElementById("policy").value;

            transferService.search(new qq.maps.LatLng(start_name[1], start_name[0]), new qq.maps.LatLng(end_name[1], end_name[0]));

            //switch (policy) {
            //    case "较快捷":
            //        transferService.setPolicy(qq.maps.TransferActionType.LEAST_TIME);
            //        break;
            //    case "少换乘":
            //        transferService.setPolicy(qq.maps.TransferActionType.LEAST_TRANSFER);
            //        break;
            //    case "少步行":
            //        transferService.setPolicy(qq.maps.TransferActionType.LEAST_WALKING);
            //        console.log(1);
            //        break;
            //    case "不坐地铁":
            //        transferService.setPolicy(qq.maps.TransferActionType.NO_SUBWAY);
            //        break;
            //}
        }
//清除地图上的marker
 function clearOverlay(overlays) {
            var overlay;
            while (overlay = overlays.pop()) {
                overlay.setMap(null);
            }
}

function renderPlan(index) {
            var plan = transfer_plans[index],
            lines = plan.lines,
            walks = plan.walks,
            stations = plan.stations;
            map.fitBounds(plan.bounds);

            //clear overlays;
            clearOverlay(station_markers);
            clearOverlay(transfer_lines);
            clearOverlay(walk_lines);
            var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(24, 36),
            bus_icon = new qq.maps.MarkerImage('/Content/Image/Map/busmarker.png', size, new qq.maps.Point(48, 0), anchor),
            subway_icon = new qq.maps.MarkerImage('/Content/Image/Map/busmarker.png', size, new qq.maps.Point(72, 0), anchor);
            //draw station marker
            for (var j = 0; j < stations.length; j++) {
                var station = stations[j];
                if (station.type == qq.maps.PoiType.SUBWAY_STATION) {
                    var station_icon = subway_icon;
                } else {
                    var station_icon = bus_icon;
                }
                var station_marker = new qq.maps.Marker({
                    icon: station_icon,
                    position: station.latLng,
                    map: map,
                    zIndex: 0
                });
                station_markers.push(station_marker);
            }

            //draw bus line
            for (var j = 0; j < lines.length; j++) {
                var line = lines[j];
                var polyline = new qq.maps.Polyline({
                    path: line.path,
                    strokeColor: '#3893F9',
                    strokeWeight: 6,
                    map: map
                });
                transfer_lines.push(polyline);
            }

            //draw walk line
            for (var j = 0; j < walks.length; j++) {
                var walk = walks[j];
                var polyline = new qq.maps.Polyline({
                    path: walk.path,
                    strokeColor: '#3FD2A3',
                    strokeWeight: 6,
                    map: map
                });
                walk_lines.push(polyline);
            }
}

function InitShopSelectItem()
{
//初始化店铺下拉数据
}

效果图：

至此导航开发完毕。