移动端浏览器调起百度地图、高德地图

移动端浏览器调起百度地图、高德地图_第1张图片
类似这样,点击两个按钮,分别调到各自的app客户端,没有客户端跳进移动端的web地图中。

百度地图和高德地图都提供了各自的地图调用的方法。百度api 高德api 百度的稍微麻烦一些,不过还好,我页面使用的百度地图,百度地图的坐标系使用的是百度自己基于GCJ-02坐标系加密得到的,所以还需要一个转换,才能得到高德的坐标。

下面是一些常用的坐标系

目前国内主要有以下三种坐标系:

  • WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。(google地图国外使用)
  • GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。(google地图国内、高德地图)
  • BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。(百度国内)
  • 非中国地区地图,服务坐标统一使用WGS84坐标。(百度国外)

参考链接:
百度地图
高德地图坐标体系
CSDN博客 坐标转换还是用官网提供的好。百度pc端的地图和lite的地图,方法不一样。
接下来就是跳转了

百度的

var baiduConfig = {
    scheme_Android: 'bdapp://map/marker?location='+fdata.baiduGpsLat+','+fdata.baiduGpsLog+'&title='+fdata.name+'&content='+fdata.address,
    scheme_IOS: 'baidumap://map/marker?location='+fdata.baiduGpsLat+','+fdata.baiduGpsLog+'&title='+fdata.name+'&content='+fdata.address,
    scheme_web: 'http://api.map.baidu.com/marker?location='+fdata.baiduGpsLat+','+fdata.baiduGpsLog+'&title='+fdata.name+'&content='+fdata.address+'&output=html'
};
var timeout = 600;
// 判断操作系统,返回百度的不同操作系统下的接口
function adjustOS(){
    var ua = window.navigator.userAgent.toLowerCase();
    return (ua.indexOf('os') > 0) ? baiduConfig.scheme_IOS : baiduConfig.scheme_Android
}
function openClient() {
    var startTime = Date.now();
    var ifr = document.createElement('iframe');  
    ifr.src = adjustOS(); 
    ifr.style.display = 'none';  
    document.body.appendChild(ifr);
    var t = setTimeout(function() {  
        var endTime = Date.now();
        if (!startTime || endTime - startTime < timeout + 200) {   
            window.location.href = baiduConfig.scheme_web;  
        }
    }, timeout);
    window.onblur = function() {  
        clearTimeout(t);  
    }
}

高德的

var gaodeLoc = [121.43140199998, 31.219317000733];
var marker = new AMap.Marker({
    position: gaodeLoc
});
marker.markOnAMAP({
    position: marker.getPosition(),
    name: fdata.name
});

你可能感兴趣的:(前端)