微信公众号通过百度地图接口实现地图导航的方法
2017-09-10 14:31
681 查看
1.先使用微信的JS-SDK 中的获取地理位置接口获取到地理位置信息 ; 然后将获取的经纬度信息转换为百度地图的经纬度,最后再使用百度地图的导航接口即可:
微信获取地理位置接口js:
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; // 位置精度
getBaiduLocation(longitude,latitude); //转换为百度坐标
}
});
//转换百度坐标
var getBaiduLocation = function(longitude,latitude) {
$.ajax({
type: "GET",
url: 'http://api.map.baidu.com/geoconv/v1/?coords='+longitude+','+latitude+'&from=1&to=5&output=json&ak=nHbhscSu1l3CjSLBNRUleeW1lppoVpaL',
dataType: 'jsonp',
success: function (msg) {
try {
var result = msg.result;
var lat = result[0].y;
var lng = result[0].x;
console.log(lat)
console.log(lng)
navi(result[0]); //导航
} catch (e) {
$.fn.alert(e.message);
}
}
});
};
//导航
var navi = function(){
// //门店列表页导航
$.fn.events.tap('.daohang', function (location) {
var bendizuobiao1 = location.x; //经度
var bendizuobiao2 = location.y; //纬度
//所要导航的目的地的坐标及其城市,县区,地址详情信息
var Address = ‘上海市; //城市
var bendics =‘闵行区’; //县区
var mendianxq
='浦江路58弄浦江花园';
var mendianzuobiao1 = location.x; //经度
var mendianzuobiao2 = location.y; //纬度
var url = "http://api.map.baidu.com/direction?origin=latlng:" + bendizuobiao2 + "," + bendizuobiao1 + "|name:我目前位置&destination=latlng:"
+ mendianzuobiao2 + "," + mendianzuobiao1 + "|name:" + Address + "&mode=driving&origin_region=" + bendics + "&destination_region=" + mendianxq + "&output=html&src=" + window.location.host;
console.log(url)
window.location.href = url ;
});
};
不要直接复制用,因为使用框架写的,所以直接复制可能用不了,基本代码就这样,根据自己需求改下即可。
微信获取地理位置接口js:
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; // 位置精度
getBaiduLocation(longitude,latitude); //转换为百度坐标
}
});
//转换百度坐标
var getBaiduLocation = function(longitude,latitude) {
$.ajax({
type: "GET",
url: 'http://api.map.baidu.com/geoconv/v1/?coords='+longitude+','+latitude+'&from=1&to=5&output=json&ak=nHbhscSu1l3CjSLBNRUleeW1lppoVpaL',
dataType: 'jsonp',
success: function (msg) {
try {
var result = msg.result;
var lat = result[0].y;
var lng = result[0].x;
console.log(lat)
console.log(lng)
navi(result[0]); //导航
} catch (e) {
$.fn.alert(e.message);
}
}
});
};
//导航
var navi = function(){
// //门店列表页导航
$.fn.events.tap('.daohang', function (location) {
var bendizuobiao1 = location.x; //经度
var bendizuobiao2 = location.y; //纬度
//所要导航的目的地的坐标及其城市,县区,地址详情信息
var Address = ‘上海市; //城市
var bendics =‘闵行区’; //县区
var mendianxq
='浦江路58弄浦江花园';
var mendianzuobiao1 = location.x; //经度
var mendianzuobiao2 = location.y; //纬度
var url = "http://api.map.baidu.com/direction?origin=latlng:" + bendizuobiao2 + "," + bendizuobiao1 + "|name:我目前位置&destination=latlng:"
+ mendianzuobiao2 + "," + mendianzuobiao1 + "|name:" + Address + "&mode=driving&origin_region=" + bendics + "&destination_region=" + mendianxq + "&output=html&src=" + window.location.host;
console.log(url)
window.location.href = url ;
});
};
不要直接复制用,因为使用框架写的,所以直接复制可能用不了,基本代码就这样,根据自己需求改下即可。
相关文章推荐
- 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索
- 启动线程的五种方式方法(通过继承Thread类或实现Runnable接口)
- 通过java方法实现将地址转换成百度地图坐标
- Spring bean 通过实现 InitializingBean ,DisposableBean 接口实现初始化方法和销毁前操作
- Spring bean 通过实现 InitializingBean ,DisposableBean 接口实现初始化方法和销毁前操作
- 使用百度地图接口实现自定义网页地图开发实现
- Skylinesoft TEPro6.1 通过开发接口加载WFS和WMS图层的实现方法
- Spring bean 通过实现 InitializingBean ,DisposableBean 接口实现初始化方法和销毁前操作
- android 通过百度地图定位获取坐标在导航地图上面显示,坐标发生偏移
- mybatis通过接口实现增删改查方法
- Spring bean通过实现InitializingBean ,DisposableBean接口实现初始化方法和销毁前操作
- php版微信公众号接口实现发红包的方法
- 学习.NET (8) 实现派生类中Deep Copy的几种常用方法(通过ICloneable接口)
- 通过Http接口及SolrNet 两种方法基于Solr5.5.1 实现CURD
- Android定位&地图&导航——基于百度地图实现的定位功能
- asp.net通过实现IHttpHandler接口方法给图片添加水印图片(动态添加,不破坏原图片,但是耗资源)
- Android中通过WebView控件实现与JavaScript方法相互调用的地图应用
- Spring bean 通过实现 InitializingBean ,DisposableBean 接口实现初始化方法和销毁前操作
- Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡
- Android HTTP实例 使用GET方法和POST方法发送请求(通过Apache接口实现)