如何使用视觉商业GeoMap与谷歌？

Question

我想在谷歌搜索中添加GeoMap点和传奇

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

这是可行的，谷歌成功地添加了。

但当我在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>

我在探索中使用演示

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

我想只使用标记，但我不能在标记上写入数据(唯一的方法是为标记编写lable )，我还需要GeoMap中的Legend。

Answer 1

根据映射提供程序配置更改

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

• 必须支持XYZ或四键接口。这是地图瓷砖的标准界面。
• 这些映射块可以通过REST web服务检索。供应商包括必应，这里(前诺基亚)，ALK，PTV等。所有这些网站都有能够购买合同的网站。

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

但是，如果您只想在GoogleMaps中使用UI5，则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 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的许可证代码放在这里的地方。

我也宁愿使用谷歌搜索，但我很难找到如何为MapProvider构建URL。

Answer 3

看起来你把这两张地图都放在了一起。这听起来不像是成功的秘诀。您甚至可能会失去工件的可见性，因为它们放在一起的顺序决定了什么是可见的，什么是不可见的。

如果您对GeoMap控件(MapQuest)的默认地图提供程序不满意，可以将其更改为其他提供程序，包括谷歌。这是使用mapConfiguration属性完成的，如下文所述：

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

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

你不能在同一张地图上同时使用谷歌标记和风水点。然而，您可以定制风水点的样子，使它们看起来更像谷歌标记。