Question

SAPUI5 - Google地图未显示。控制台中没有错误，但谷歌地图没有显示。请找到我尝试过的代码段。

的index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        <script 
        src="https://maps.googleapis.com/maps/api/js?
        key=AIzaSyCEf_wLCEciMDw7tgnDGXptl94rdzLhW7Y&libraries=places"
        type ="text/javascript">    </script>

        <script id='sap-ui-bootstrap' type='text/javascript'
        src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.m'></script>


        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>
                sap.ui.localResources("googlemaps");
                var app = new sap.m.App({initialPage:"idgooglemaps1"});
                var page = sap.ui.view({id:"idgooglemaps1", 
                viewName:"googlemaps.googlemaps", 
                type:sap.ui.core.mvc.ViewType.XML});
                app.addPage(page);
                app.placeAt("content");
        </script>


</script>

        <style>
        .myMap {                   
        height: 100%;
        width: 100%  ;
        }
        </style>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

在View中，我添加了画布

<HBox id="map_canvas" fitContainer="true" justifyContent="Center"
    alignItems="Center" >

    </HBox>

控制器：在OnAfterRendering事件中，我编写了地图初始化。

onAfterRendering: function() {
        if (!this.initialized) {
        this.initialized = true;
        this.geocoder = new google.maps.Geocoder();
        window.mapOptions = {                          
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };                           
        //This is basically for setting the initial position of the map, ie. Setting the coordinates, for the place by default

        var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
        console.log(map);
        var infowindow = new google.maps.InfoWindow;
        var geocoder = new google.maps.Geocoder();
        var marker = new google.maps.Marker({
        map: map,
        });

Answer 1

创建UI5控件时，分配给HTML元素的ID是生成的ID（在您的情况下为“idgooglemaps1 - map_canvas”）。因此，不存在ID为“map_canvas”的元素。但是你可以获取UI5控件和获取生成的ID。

var oHBox = this.getView().byId("map_canvas");
var map = new google.maps.Map(document.getElementById(oHBox.getId()), mapOptions);

Answer 2

似乎缺少某些东西。实际上，通过检查器，项目my的正确路径比oHBox.getId（）返回的路径更长。例如：

container-TestGpsNew---View1--box1-container-TestGpsNew---View1--myAppGPS-0
oHBox.getId() = container-TestGpsNew---View1--box1, 
container-TestGpsNew---View1--myAppGPS is the path for the View for example : 
this.byId("myAppGPS").getId()

还有剩余的“ -0”，我不知道它是从哪里来的。仍在搜索。

SAPUI5 - 未显示谷歌地图

2 个答案: