【问题标题】:How to use Google Maps with SAPUI5 GeoMap control如何使用带有 SAPUI5 GeoMap 控件的 Google 地图
【发布时间】:2016-10-28 16:03:16
【问题描述】:

我有一个 SAPUI5 应用程序,需要在 GeoMap 控件上绘制点。只要我使用 HEREMaps 作为提供者,它就可以正常工作。但是,公司希望我使用谷歌地图。我找不到任何关于如何为 GeoMap 控件设置 MapProvider 以使用 Google 地图的信息。

这是(基本上)我的 GeoMap 控件:

                <vk:content>
                    <vk:ContainerContent title="Map" icon="sap-icon://choropleth-chart">
                        <vk:content>
                            <vbm:GeoMap id="GeoMap" width="100%" height="100%">
                                <vbm:vos>
                                    <vbm:Spots 
                                        click="onClickItem" 
                                        contextMenu="onContextMenuItem" 
                                        id="caseTimeMapSpots" 
                                        items="{path: '/CaseEvents/results'}" 
                                        posChangeable="true" 
                                        scaleChangeable="true"
                                        >
                                        <vbm:items>
                                        <vbm:Spot 
                                            id="Spot"
                                            position="{Longitude};{Latitude};0" 
                                            tooltip="{EventName} - {path: 'EventDatetime', formatter: '.formatDate'} {path: 'EventDatetime', formatter: '.formatTime'}" 
                                            type="Warning"
                                            click="onClickSpot" 
                                            contextMenu="onContextMenuSpot" 
                                            text="{EventName}"
                                            scale="{path: 'DeleteInd', formatter: '.formatScale'}"
                                        />
                                        </vbm:items>
                                    </vbm:Spots>
                                </vbm:vos>
                            </vbm:GeoMap>
                        </vk:content>
                    </vk:ContainerContent>
                </vk:content>

这是我在控制器中设置 MapProvider 的地方:

            var oGeoMap = this.getView().byId("GeoMap");
            var oMapConfig = {
                "MapProvider": [{
                    "name": "HEREMAPS",
                    "type": "",
                    "description": "",
                    "tileX": "256",
                    "tileY": "256",
                    "maxLOD": "20",
                    "copyright": "Tiles Courtesy of HERE Maps",
                    "Source": [
                        {
                        "id": "s1",
                        "url": "https://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png8?app_id=XXX"
                        },
                        {
                        "id": "s2",
                        "url": "https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png8?app_id=XXX"
                        }
                    ]
                }],
                "MapLayerStacks": [{
                    "name": "DEFAULT",
                    "MapLayer": {
                        "name": "layer1",
                        "refMapProvider": "HEREMAPS",
                        "opacity": "1.0",
                        "colBkgnd": "RGB(255,255,255)"
                    }
                }]
            };
            oGeoMap.setMapConfiguration(oMapConfig);
            oGeoMap.setRefMapLayerStack("DEFAULT");
            oGeoMap.setInitialZoom(13);
            oGeoMap.setInitialPosition("-97.57;35.57;0");

有人用谷歌地图做过吗? MapProvider 是如何设置的?

谢谢。

【问题讨论】:

  • 这是可行的..它与上面的非常相似..您可以拥有地图画布的dom并在控制器中渲染后加载地图..
  • 感谢您的回复。是的,似乎每个人都认为这是可行的,但似乎没有人知道为 URL 或名称输入什么。如果您知道具体情况,您可以分享它们吗?谢谢。
  • 刚刚开始工作,一旦我完全弄清楚并可以提供很好的参考,就会更新答案。
  • 谢谢,卡斯滕。我期待听到它。

标签: google-maps sapui5 sap-fiori geomap


【解决方案1】:

更新

所以我终于能够结束这件事了。有一种官方方法可以直接使用Tiles API 访问谷歌地图图块。 按照链接中的指南,您可以使用 Tiles API 中的 URL 配置下面看到的 MapConfig。

但是,如果没有付费计划,则无法使用此 API! (这个计划的运行成本大约是 JS API 使用量的 10 倍)因此,我不会进一步跟进。


很抱歉,我还没有达到我想要的程度。以下配置是最精简的版本。这里的重点是您需要 url 才能直接获取地图图块。 X 和 Y 指定图块,{LOD} 指定详细程度。这些参数不必替换,但会在运行时由 GeoMap 控件设置。

我尚未发布此内容的主要原因是 - 虽然它在技术层面上工作 - 我到目前为止所阅读的所有内容都表明直接访问图块违反了 Google 地图的服务条款。因此,虽然它可以摆弄我,但我不会在生产环境中使用它!目前,我正在尝试找到一种方法来澄清许可中是否存在启用此用途的内容,或者我是否是 SOL。

很遗憾,官方 API 没有提供请求特定地图图块的方法。解决这个问题的另一种方法是查看 SAP 是否可以/确实提供不同的 MapProvider 实现。

var oMapConfig = {
        "MapProvider": [{
            "name": "GMAP",
            "Source": [{
            "id": "s1",
            "url": "https://mt.google.com/vt/x={X}&y={Y}&z={LOD}"
            }]
        }],
        "MapLayerStacks": [{
                "name": "DEFAULT",
                "MapLayer": {
                        "name": "layer1",
                        "refMapProvider": "GMAP",
                        "opacity": "1",
                        "colBkgnd": "RGB(255,255,255)"
                }
        }]
    };

【讨论】:

  • 啊。感谢更新。是的,如果它违反 ToS,那么它对于生产来说将是不确定的。从那以后,我已经让 openui5 googlemaps 库在我的应用程序中工作,我认为该库现在可以满足我们的目的。感谢您分享代码。
  • 嘿,只是做了一点跟进,并用不违反 ToS 的方式配置谷歌地图的方式更新了答案。如果它解决了问题,也请接受答案。
  • 谢谢,卡斯滕。当我有机会时,我会试一试。感谢您的帮助!
  • Carsten,我今天尝试使用您的代码,它运行良好。非常感谢您的分享。我已将您的回复标记为答案,我希望能给您寄一瓶苏格兰威士忌;-)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多