格式化要在地图ui5应用上显示的值失败

问题描述

我想从Address.Json模型中读取信息,如下所示:

{
  "Street": "Wall St","Zip": "10005","City": "New York","Country": "United states"
}

在Object.view.xml中将它们显示为图像:

<Image class="sapUiSmallMargin" src="{
                    parts: [
                        '/address/Street','/address/Zip','/address/City','/address/Country'
                    ],formatter: '.formatter.formatMapUrl'
                }" />

并在formatter.js中设置URL的格式,以便使其在ui5应用程序的地图上显示

sap.ui.define([
    'sap/base/security/encodeURL'
],function (encodeURL) {
    "use strict";

    return {
        /**
         * Formats an address to a static google maps image
         * @public
         * @param {string} sstreet the street
         * @param {string} sZIP the postal code
         * @param {string} sCity the city
         * @param {string} sCountry the country
         * @returns {string} sValue a google maps URL that can be bound to an image
         */
        formatMapUrl: function(sstreet,sZIP,sCity,sCountry) {
            var sBaseUrl = "https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=640x640&markers=";
            var sEncodedString = encodeURL(sstreet + "," + sZIP +  " " + sCity + "," + sCountry);
            return sBaseUrl + sEncodedString;
        }


    };

});

不幸的是,由于格式化程序中的参数未定义,我无法使地图显示在应用程序上:

Error

因此,应用程序上的地图部分为空:

EmptyMap

有人知道我如何解决它,为什么我编写的代码不起作用?

解决方法

您需要将模型添加到视图以进行绑定。请参阅下面的示例。

Controller.js:

onInit: function () {
    var oModel = new JSONModel({
        "Street": "Wall St","Zip": "10005","City": "New York","Country": "United states"
    });
    // Adds JSONModel with name 'addressModel' to the view so you can bind to it
    this.getView().setModel(oModel,"addressModel");
}

View.xml:

<Image
    class="sapUiSmallMargin"
    src="{
        parts: [
            'addressModel>/Street','addressModel>/Zip','addressModel>/City','addressModel>/Country'
         ],formatter: '.formatter.formatMapUrl'
     }"
  />