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

这里写图片描述
类似这样，点击两个按钮，分别调到各自的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
});

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

猜你喜欢