问题

I am trying to add new Send SMS button on map marker as you can check below.
我正在尝试在地图标记上添加新的“发送短信”按钮，如下所示。

I am unable to add on click method, I have tried below code but its not working.
我无法添加点击方法，我尝试了下面的代码，但它不起作用。

import { MapRenderer } from "@web_map/map_view/map_renderer";

export class SmsMapRenderer extends MapRenderer {
    setup() {
        super.setup();
    }

    createMarkerPopup(markerInfo, latLongOffset = 0) {
        const popup = super.createMarkerPopup(...arguments);
        debugger;
//        const popup = super.createMarkerPopup(markerInfo, latLongOffset);
        const popupFields = popup.getMarkerPopupFields(markerInfo);

        const partner = markerInfo.record.partner;
        const popupHtml1 = renderToString("renewell.sendsmsPopup", {
            fields: popupFields,
            hasFormView: this.props.model.metaData.hasFormView,
        });

        const opensmsBtn = popup
            .getElement()
            .querySelector("button.o-map-renderer--popup-buttons-send_sms");
        const offset = markerInfo.pinInSamePlace * 0.000050;
        if (opensmsBtn) {
            opensmsBtn.onclick = () => {
                const popup = L.popup({ offset: [0, -30] })
                    .setLatLng([
                        partner.partner_latitude + latLongOffset,
                        partner.partner_longitude - latLongOffset,
                    ])
                    .setContent(popupHtml1)
                    .openOn(this.leafletMap);
            };
        }

        return popup;
    }
}

Please give me some suggestion or any example.
请给我一些建议或示例。

import { MapRenderer } from "@web_map/map_view/map_renderer";

export class SmsMapRenderer extends MapRenderer {
    setup() {
        super.setup();
    }

    createMarkerPopup(markerInfo, latLongOffset = 0) {
        const popup = super.createMarkerPopup(...arguments);
        debugger;
//        const popup = super.createMarkerPopup(markerInfo, latLongOffset);
        const popupFields = popup.getMarkerPopupFields(markerInfo);

        const partner = markerInfo.record.partner;
        const popupHtml1 = renderToString("renewell.sendsmsPopup", {
            fields: popupFields,
            hasFormView: this.props.model.metaData.hasFormView,
        });

        const opensmsBtn = popup
            .getElement()
            .querySelector("button.o-map-renderer--popup-buttons-send_sms");
        const offset = markerInfo.pinInSamePlace * 0.000050;
        if (opensmsBtn) {
            opensmsBtn.onclick = () => {
                const popup = L.popup({ offset: [0, -30] })
                    .setLatLng([
                        partner.partner_latitude + latLongOffset,
                        partner.partner_longitude - latLongOffset,
                    ])
                    .setContent(popupHtml1)
                    .openOn(this.leafletMap);
            };
        }

        return popup;
    }
}

答案1

得分: 1

I have found a solution and it's working for me. I just needed to add a patch in my code.

import { patch } from "@web/core/utils/patch";
import { MapRenderer } from "@web_map/map_view/map_renderer";
import { renderToString } from "@web/core/utils/render";
import rpc from 'web.rpc';

const { useEffect, useRef } = owl;

patch(MapRenderer.prototype, "ModuleName.SmsPopup", {
    setup() {
        this._super();
    },

    createMarkerPopup(markerInfo, latLongOffset = 0) {
        debugger;
        const popup = this._super(...arguments);
        const popupFields = this.getMarkerPopupFields(markerInfo);
        debugger;
        const partner = markerInfo.record.partner;
        const popupHtmlSms = renderToString("ModuleName.sendsmsPopup", {
            fields: popupFields,
            hasFormView: this.props.model.metaData.hasFormView,
        });

        const opensmsBtn = popup
            .getElement()
            .querySelector("button.o-map-renderer--popup-buttons-send_sms");
        const offset = markerInfo.pinInSamePlace * 0.000050;
        if (opensmsBtn) {
            opensmsBtn.onclick = () => {
                debugger;
                const popup = L.popup({ offset: [0, -30] })
                .setLatLng([
                    partner.partner_latitude + latLongOffset,
                    partner.partner_longitude - latLongOffset,
                ])
                .setContent(popupHtmlSms)
                .openOn(this.leafletMap);
            };
        }
        return popup;
    },
});

(Note: The code within the backticks is not translated, as per your request.)

import { patch } from "@web/core/utils/patch";
import { MapRenderer } from "@web_map/map_view/map_renderer";
import { renderToString } from "@web/core/utils/render";
import rpc from 'web.rpc';

const { useEffect, useRef } = owl;

patch(MapRenderer.prototype, "ModuleName.SmsPopup", {
    setup() {
        this._super();

    },

    createMarkerPopup(markerInfo, latLongOffset = 0) {
        debugger;
        const popup = this._super(...arguments);
        const popupFields = this.getMarkerPopupFields(markerInfo);
        debugger;
        const partner = markerInfo.record.partner;
        const popupHtmlSms = renderToString("ModuleName.sendsmsPopup", {
            fields: popupFields,
            hasFormView: this.props.model.metaData.hasFormView,
        });

        const opensmsBtn   = popup
            .getElement()
            .querySelector("button.o-map-renderer--popup-buttons-send_sms");
        const offset = markerInfo.pinInSamePlace * 0.000050;
        if (opensmsBtn) {
            opensmsBtn.onclick = () => {
                debugger;
                const popup = L.popup({ offset: [0, -30] })
                .setLatLng([
                    partner.partner_latitude + latLongOffset,
                    partner.partner_longitude - latLongOffset,
                ])
                .setContent(popupHtmlSms)
                .openOn(this.leafletMap);
            };
        }
        return popup;
    },
});