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,
});
创建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);
似乎缺少某些东西。事实上,通过检查器,项目的正确路径比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”我不知道它来自哪里。仍在搜索中。