如何将 Visual Business GeoMap 与 Google Maps 结合使用？

Question

我想在 Googlemaps 中添加GeoMap Spot 和 Legend

我的.view.xml：

        <l:FixFlex>
            <l:flexContent>
                <vk:MapContainer autoAdjustHeight="true">
                    <vk:content>
                        <vk:ContainerContent titile="test">
                            <vk:content>

                                <vbm:AnalyticMap id="map"></vbm:AnalyticMap>

                            </vk:content>
                        </vk:ContainerContent>
                    </vk:content>
                </vk:MapContainer>
            </l:flexContent>
        </l:FixFlex>

我的.controller.js

    var mapDom = this.getView().byId("map").getDomRef();
    onAferRendering: function() {
       jQuery.sap.includeScript(
         "https://maps.googleapis.com/maps/api/js?key=XXX",
         null,
         function() {
           ...
           mainmap =new google.maps.Map(mapDom, mapProp);
    }
}

这是正常的，Googlemap添加成功。

但是当我在 AnalyticMap 中添加 Spot 时，googlemaps 消失了。仅 AnalyticMap 和 Spots 显示。

<l:FixFlex>
    <l:flexContent>
        <vk:MapContainer autoAdjustHeight="true">
            <vk:content>
                <vk:ContainerContent titile="test">
                    <vk:content>
                        <vbm:AnalyticMap id="map">
                            <vbm:vos>
                                <vbm:Spots items="{/Spots}" click="onClickItem" contextMenu="onContextMenuItem">
                                    <vbm:Spot position="{pos}" tooltip="{tooltip}" type="{type}" text="{text}" click="onClickSpot" contextMenu="onContextMenuSpot" />
                               </vbm:Spots>                                 
                            </vbm:vos>
                        </vbm:AnalyticMap>                      
                    </vk:content>
                </vk:ContainerContent>
            </vk:content>
        </vk:MapContainer>
    </l:flexContent>
</l:FixFlex>

我在Explored使用demo

如何将这两者结合起来？我可以在 googlemaps 和 GeoMap 中同时使用标记吗？

我想只使用标记，但我不能在标记上写数据（唯一的方法是为标记写标签），而且我还需要 GeoMap 中的图例。

Answer 1

我正在做类似的事情。这是我在控制器中用于将 HEREMAPS 设置为地图提供者的特定代码。

            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");

上面的 XXX 是您放置 HereMaps 许可代码的位置。

我也更愿意使用 Googlemaps，但我在找出如何为 MapProvider 构建 URL 时遇到了麻烦。

Answer 2

根据Map Provider Configuration Changes

要访问 SAP 内部的地图，地图提供者必须满足这两个要求

• 必须支持 XYZ 或四键接口。这是地图图块的标准界面。
• 可以通过 REST Web 服务检索地图图块。 供应商包括 Bing、HERE（原诺基亚）、ALK、PTV 等。都有可以购买合同的网站。

GoogleMaps 似乎不是 GeoMap 可用的地图提供商之一。

---

但如果你只是想在 UI5 中使用 GoogleMaps，GeoMap 不是强制性的。 只需在视图中添加地图div：

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml">
  <html:div id="map" style="height:100%"></html:div>

// Controller
onAfterRendering: function() {
  jQuery.sap.includeScript(
    "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY",
    "googlemap",
    function() {
      const mapDomId = this.getView().byId("map").getId(),
      mapDom = document.getElementById(mapDomId);
      
      this.mapConfig.initGoogleVariables();
      window.mainmap = new google.maps.Map(mapDom, this.mapConfig.mapProp); 
    }.bind(this),
    function() {
    }
  );
}

Answer 3

您似乎将两张地图放在一起。这听起来不像是成功的秘诀。您甚至可能会失去对工件的可见性，因为它们相互叠加的顺序决定了哪些是可见的，哪些是不可见的。

如果您对 GeoMap 控件 (MapQuest) 的默认地图提供者不满意，您可以随时将其更改为其他提供者，包括 Google。这是使用此处记录的 mapConfiguration 属性完成的：

https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.vbm.GeoMap.html#setMapConfiguration

如果您将 Google 配置为您的地图提供商，您可以在 Google 地图之上使用 GeoMap 的所有常用功能，我认为这正是您所寻找的。​​p>

您不能在同一张地图中同时使用 Google 标记和 Geomap 点。但是，您可以自定义 Geomap 点的外观，使它们看起来更像 Google 标记。