Question

我是Odoo的新手，我正在学习如何创建新的小部件，第一次我想在表单中嵌入Google Maps屏幕。首先，我在<record><form>内创建了两个组，第一个组显示了一些数据（可以），第二个组要显示Google Maps屏幕（这是一个问题）。我创建了一个名为vz.visit的模块。

1。首先尝试

创建google_maps_widget.js，teste.xml和google_maps_widget.xml。

views.xml

<record model="ir.ui.view" id="vz_visit_create_form_view_2">
  <field name="name">vz.visit.form</field>
  <field name="model">vz.visit</field>
  <field name="arch" type="xml">
    <form string="Registro de Visita">
      <sheet>
        <group>

          <!-- DATA GROUP: It's OK -->
          <group>
            <field name="name" readonly="1"/>
            <field name="partner_id"/>
            <field name="description"/>
            <field name="date_start"/>
            <field name="date_end"/>
            <field name="duration"/>
            <field name="location"/>
          </group>

          <!-- MAP GROUP: Not works -->
          <group>
            <field name="google_map_partner" widget="vz_google_map" nolabel="1"/>
          </group>

        </group>
      </sheet>
    </form>
  </field>
</record>

google_maps_widget.js

odoo.define('vz_visit.FieldMap', function(require) {
"use strict";

var core = require('web.core');
var form_common = require('web.form_common');

var FieldMap = form_common.AbstractField.extend({
    template: 'FieldMap',
    start: function() {
        var self = this;

        this.map = new google.maps.Map(this.el, {
            center: {lat:-26.22947, lng:-52.671561},
            zoom: 10,
            disableDefaultUI: false,
        });
    }
});

core.form_widget_registry.add('vz_google_map',FieldMap);

return {
    FieldMap : FieldMap,
};

});

google_maps_widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="FieldMap">
        <div class="vz_gmap"></div>
    </t>
</templates>

teste.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/vz_visit/static/src/js/google_maps_widget.js"/>
            </xpath>
        </template>
    </data>
</odoo>

结果：该页面未加载并显示错误。

错误：

对话框：ReferenceError: Google is not defined.
控制台：ReferenceError: Google is not defined.

2。再试一次

想法：使用回调函数在src脚本上加载Google地图。编辑以下两个文件：

teste.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/vz_visit/static/src/js/google_maps_widget.js"/>
                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&callback=initMap"/>
            </xpath>
        </template>
    </data>
</odoo>

google_maps_widget.js

odoo.define('vz_visit.FieldMap', function(require) {
"use strict";

var core = require('web.core');
var form_common = require('web.form_common');

var FieldMap = form_common.AbstractField.extend({
    template: 'FieldMap',
    start: function() {
        var self = this;

        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('vz_google_map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 10
            }
        );
      }
    }
});

core.form_widget_registry.add('vz_google_map',FieldMap);

return {
    FieldMap : FieldMap,
};

});

结果：页面已加载，但未显示地图。

错误：

控制台：Could not get content for https://maps.googleapis.com/maps/api/js?key=API_KEY defined in bundle web.assets_beckend

如何通过新的小部件将Google Maps嵌入Odoo的某个字段？

0 个答案: