2

我想在 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>

我在已探索中使用演示

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

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

4

3 回答 3

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。

于 2016-10-28T15:49:05.497 回答
1

根据地图提供者配置更改

要访问 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() {
    }
  );
}
于 2018-08-16T06:12:12.247 回答
0

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

如果您对 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 标记。

于 2016-08-18T11:28:19.893 回答