微信定位+騰訊地圖導航

　　最近在開發微信時，遇到微信導航的需求，第一思路就是通過微信獲得用戶的經緯坐標，然后把坐標扔給騰訊地圖的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()
{
//初始化店鋪下拉數據
}

效果圖：

至此導航開發完畢。