Question

我有一个带有带有ID和ref为map的section标签的组件。该ID用于加载Google Map，请不必担心。

<section
    id="map"
    ref="map"
>
</section>

我有一个名为showUserLocationOnTheMap()的函数，带有一个名为Map的按钮，当用户单击它时会调用该按钮。该功能基于地址在地图上显示标记，该标记从上一步开始存储在数据库中。

showUserLocationOnTheMap(latitude, longitude) {
    let map = new google.maps.Map(document.getElementById("map"), {
        zoom:15,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId:google.maps.MapTypeId.ROADMAP
    });

    const marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map
    });

    google.maps.event.addListener(marker, "click", () => {

        const infoWindow = new google.maps.InfoWindow();

        infoWindow.setContent(
            `<div class="ui header">
                <h6>company name</h6>
             </div>
              `
        );
        infoWindow.open(map, marker);

    });

    this.$refs.map.scrollToTop();

},

<button
    @click="showUserLocationOnTheMap(item.profile.latitude,item.profile.longitude)"
    class="apply-job-btn btn btn-radius btn-primary apply-it"
>
    Map
</button>

我想做的是，我有很多搜索结果，所以当有人向下滚动页面并单击记录中的“地图”按钮时，它将做两件事。

它在地图上显示一个标记（正在运行）
它会向上滚动到页面顶部，以便用户可以看到上面带有标记的地图。

我尝试过的事情：我在下面创建了此函数：

scrollToTop() {
    this.$el.scrollTop = 0;
}

我在我的Section标记中添加了一个称为map的ref属性，然后在我的showUserLocationOnTheMap()函数的末尾调用了这一行（如您在上面所看到的）。 this.$refs.map.scrollToTop();

问题是我遇到此错误： Cannot read property 'scrollToTop' of undefined"

如何使用Vue js滚动到Button Click的页面顶部？

0 个答案: