Question

我正在使用谷歌地图API，并创建了一个组件来显示地图。

的index.html：

form_dropdown

GoogleMap.vue：

public function get_employee_to_division($seleted_val = '') {
        $this->db->select(array('emp_profile.emp_id', 'emp_profile.emp_no', 'emp_profile.name_short'));
        $this->db->from('emp_in_division');
        $this->db->join('`emp_profile`', '`emp_in_division`.`emp_id` = `emp_profile`.`emp_id`', 'INNER');
        $this->db->where('emp_in_division.division_id' . '=' . '1');
        $this->db->order_by("emp_profile.emp_no", "asc");
        $d = $this->db->get();

        if ($d) {
            $data = array();
            $data[] = "Select Employee";
            foreach ($d->result() as $row) {

// Add array keys to the array while looping...
                $data[$row->emp_id] = $row->emp_no . '-' . $row->name_short;
            }

            $emp_dropdown = form_dropdown('employer_id" id="employer_id" class="form-control text-left"', $data, $seleted_val);
            return $emp_dropdown;
        } else {
            return FALSE;
        }
    }

问题是，在加载google maps API之前渲染组件。加载google地图API后如何显示？

Answer 1

使用vue.mounted生命周期方法并在首次装入组件时手动加载gmaps脚本。通过这种方式，您可以在加载gmaps api后启动代码（对于google auth api也能很好地工作）

mounted: function () {
    if (window.google && window.google.maps) {
        this.create_map();
        return;
    }

    var self = this;
    var script = document.createElement("script");
    script.onload = function () {
        if (!window.google && !window.google.maps)
            return void (console.error("no google maps script included"));

        self.create_map();
    };

    script.async = true;
    script.defer = true;
    script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Answer 2

如果我是你，我会在名为googleMapsReference的数据对象上创建一个属性，并为其指定window.google。然后使用观察者用typeof检查它的值。如果它未定义，那么你知道它还没有加载。如果你得到了对象＆＃39;然后你知道它有，你可以调用函数来创建地图。

很抱歉，我写了代码，但我正在手机上。

此处的文档：https://vuejs.org/v2/guide/computed.html

加载外部脚本后运行Vue组件的方法

2 个答案: