最近在开发微信时，遇到微信导航的需求，第一思路就是通过微信获得用户的经纬坐标，然后把坐标扔给腾讯地图的API,搞定，结果定位总出现几条街的偏差，在网上查资料，用百度地图的有，但是用腾讯地图的却没找到现成的，经过自己的摸索，现在总结下，自己技术积累，也方便有需要之人。有不足之处，望指出。
首先微信获取地理位置（如何获取这里不敷衍了），要注意这个是异步过程。
其次微信返回的坐标系和腾讯地图的坐标系不是一个回事（自家的产品还搞两套东西，真不知道腾讯怎么想的），如果要微信的坐标在腾讯地图上准确显示，还得经过转换的步骤。这里转换前提知道微信是什么的坐标系，经过测试发现微信用的搜狗经纬度。网上有人说微信根据安卓或IOS分别提供谷歌和GPS的坐标系，经测试并没有那么回事。
背景已说明，以下看代码。
第三方插件自然少不了文件的引用
1 <script src="~/Scripts/jquery-1.8.3.min.js"></script> 2 <script charset="utf-8" src="~/Scripts/Map/qqApi/js.js"></script> 3 <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
微信获取地理位置代码
1 wx.getLocation({ 2 success: function (data) { 3 qq.maps.convertor.translate(new qq.maps.LatLng(data.latitude, data.longitude), 2, function(res) { 4 latlng = res[0]; 5 fn(latlng.lng,latlng.lat);//实际处理逻辑 6 }); 7 }
注：需求关键点是在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> '; 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() { //初始化店铺下拉数据 }
效果图：
至此导航开发完毕。
联系客服
