如何将 Visual Business GeoMap 与 Google 地图一起使用？

Question

我想在 Googlemaps 中添加 GeoMap Spot 和 Legend

My.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>

My.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

中使用演示

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

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

Answer 1

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

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

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

如果您将 Google 配置为您的地图提供者，您可以在 Google 地图之上使用 GeoMap 的所有常用功能，我认为这正是您所需要的。

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

Answer 2

我正在做类似的事情。这是我在控制器中使用的特定代码，用于将 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 3

根据Map Provider Configuration Changes

To access the maps inside SAP a map provider has to fullfil these two requirements

A XYZ or quadkey interface has to be supported. This is the standard interface for map tiles.

The maps tiles can be retrieved by a REST web service. Providers include Bing, HERE (formerly Nokia), ALK, PTV and others. All have web sites enabling purchase of contracts.

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() {
    }
  );
}

如何将 Visual Business GeoMap 与 Google 地图一起使用？

how to use Visual Business GeoMap with Googlemaps?

google-maps

geomap

sapui5

sap-fiori