高德&百度&腾讯地图 公共交通分析

Posted 2023-04-25

参考技术A 前言：程序员想转行产品，算是半GISer，就从地图开始叭~希望看到的兄弟姐们多多吐槽~

调研页面：乘坐公共交通从A地到B地，公共交通列表页比较。

共同点：三者都包括顶部搜索过滤、路线列表和其他信息。

总结前置：

三款app都提供多个备选方案，能满足基本的公共交通交通出行要求（这里没做路线有效性研究）。

百度更贴合出行方式上的用户需求（比如公共交通 + 打车）

高德提供更多公共交通信息（拥挤程度等），填补某些用户考量维度的信息空白。（我真的好爱拥挤程度信息啊摔）

暗藏玄机：高德为了给自己的打车整合平台引流，在列表页加了打车入口。而腾讯为了推广乘车码，添加了乘车码快捷入口~

综上，腾讯out~高德和百度能取长补短一下嘛？

百度路线列表

亮点：

交通方式 - 智行：结合当下出行习惯。用户考虑到 出行的时间成本&金钱成本&精力成本 会选择“公共交通 + 打车”的方式，这种出行不好归为某一种交通方式的路线，所以百度推出“智行”，解决这种场景下的需求。

 排序规则 - 其他（合适路段推荐骑车方案）：同样也是结合线下出行习惯。在排序规则里面换乘少或者时间短可能带来的就是步行多，共享单车的普及可以减少步行和到达目的地的时间。

小缺点：

路线标注“最佳”：工具类app需要尽量避免主观词作为推荐原因。这里的最佳可能是结合时间成本、金钱成本等因素做的算法推荐，但是对于有大量时间的用户可能认为耗时最长的公交是最佳，晕车的人可能觉得全部坐地铁是最佳等等。这里只要给出客观的tag就好了，比如路程最短，步行最少等。由用户自行选择。

高德路线列表

小亮点：

实时公交：站台大都有实时公交信息，这个信息应该是针对没有到达公交/地铁站，又想赶上车的用户。

拥挤程度：增加了一个用户考量选择维度！这个真的是我内心的呼唤了！高德爱你！不过好像武汉并没有这个信息，不知道深圳市怎么统计的。

提供打车入口：满足时间敏感用户的需求，也是为自己的网约车整合平台引流吧~win-win！

小缺点：

唔，可能用习惯了高德？目前还没感受到缺点。

腾讯路线列表

亮点：

乘车码：最近腾讯好像在大力推广乘车码，也把乘车码带入地图里面，而不是孤零零的小程序应用。对于刷码乘车的用户，减少操作步骤。

小缺点：

乘车码：先阶段并不是所有公交都能乘车码打通了。如果用户需要使用该乘车码，需要核对可使用乘车码的车次和路线中车次。

个人觉得会在地图里面使用乘车码有两个先决条件：

用户不熟悉路线：不然刷码是支付行为，会更偏向微信或者支付宝扫公交码。除非有优惠~

无需换乘 || 行程所有车次都可以刷此码：不然用户需要切换几次应用才能完成整个行程的车费支付，有点麻烦。

最后，记得当初我把百度&腾讯&高德全下了，然后体验了几次留下了高德，咱也忘了为啥。

本来以为小小的列表大家应该都差不多，但是感觉暗藏玄机~

如果有人还能看到这里没关掉页面~~

我在搜索某个住宅区的时候，显示的比例尺都不一样诶，是随便定的还是有意为之哦？另外，详情信息、功能入口也有很大的不同哦~感觉还有点意思的~

openlayers 3加载百度高德google瓦片地图

1、加载高德地图

      //高德地图
      var AMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: ‘http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}‘
            })
          });

2、google地图

      //google地图
      var googleMapLayer = new ol.layer.Tile({  
            source: new ol.source.XYZ({  
                url: ‘http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0‘  
            })  
        });

3、百度地图

    //百度地图
    var projection = ol.proj.get("EPSG:3857");  
    var resolutions = [];  
    for (var i = 0; i < 19; i++) {  
        resolutions[i] = Math.pow(2, 18 - i);  
    }  
    var tilegrid = new ol.tilegrid.TileGrid({  
        origin: [0, 0],  
        resolutions: resolutions  
    });  
  
    var baidu_source = new ol.source.TileImage({  
        projection: projection,  
        tileGrid: tilegrid,  
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {  
            if (!tileCoord) {  
                return "";  
            }  
            var z = tileCoord[0];  
            var x = tileCoord[1];  
            var y = tileCoord[2];  
            if (x < 0) {  
                x = "M" + (-x);  
            }  
            if (y < 0) {  
                y = "M" + (-y);  
            }  
            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20170809&scaler=1&p=1";  
        }  
    });  
  
    var baiduMapLayer = new ol.layer.Tile({  
        source: baidu_source  
    });

4、map中调用

      var map = new ol.Map({
        layers: [googleMapLayer],//AMapLayer, baiduMapLayer
        target: ‘map‘,
        view: new ol.View({
          center: [10997148, 4569099],
          zoom: 4
        })
      });