在 Vue / Laravel 中使用谷歌地图答案

【问题标题】：Using google map in Vue / Laravel在 Vue / Laravel 中使用谷歌地图
【发布时间】：2019-02-01 12:44:20
【问题描述】：

尝试在 Vue 组件中实现谷歌地图。但是过得很艰难。实际上，没有错误。但也没有地图 :) 好吧，我在下面尝试过。

在 laravel Blade 中，我设置了我的 api。

<script async defer src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_MAPS_API')}}&callback=initMap"></script>

然后在Vue组件中；

data() {
        return {
            mapName: "map",
            //some other codes
        }           
},

mounted() {
        this.fetchEstates();
},
methods: {
        fetchEstates(page = 1) {
            axios.get('/ajax', {
                params: {
                    page
                }}).then((response) => {
                    // console.log(response);
                    this.estates = response.data.data;
                    //some other codes....
                    //some other codes....


},
computed: {

        //some other functions in computed... 
        //

        initMap: function(){
                    var options =
                        {
                            zoom : 6,
                            center : {
                                lat:34.652500,
                                lng:135.506302
                            }
                        };

                    var map = new google.maps.Map(document.getElementById(this.mapName), options);
                    var marker = new google.maps.Marker({
                        map: map,
                        icon: 'imgs/marker.png',
                        url: "/pages/estates.id",
                        label: {
                            text: this.estates.price,
                            color: "#fff",
                        },
                        position: {
                            lat: this.estates.lat,
                            lng: this.estates.lng
                        }
                    });
                        google.maps.event.addListener(marker, 'click', function () {
                            window.location.href = this.url;
                    });


                }

&lt;div id="map"&gt;&lt;/div&gt;

最后一个标记url id 绑定在这样的控制器中，

public function details($id)
{
    $estates = allestates::where('id', $id)->first();

    return view('pages.details', compact('estates'));

}

我在 Vue js 中遗漏了什么吗？谢谢！

【问题讨论】：

在这种情况下，您可能错误地使用了computed。我猜你想在安装组件时执行initMap()？如果您从未在模板中引用 initMap，则永远不会评估计算的属性。另外，无论如何你都会返回 void，这不是计算属性应该开始的。
你试过现有的包吗？
实际上，正在尝试制作自定义地图，@GabMic
@Terry 你能再检查一下吗，我更新了问题和代码。
检查您的控制台日志。它说什么？

标签： javascript vue.js vuejs2

【解决方案1】：

根据我们在 cmets 中的讨论，我意识到您的问题是因为在执行 initMap() 时仍未定义 this.estates。请记住，您正在使用异步操作（通过 axios）来填充 this.estates，因此它在运行时是未定义的。你可以做的是：

保持地图初始化逻辑在initMap()
移动所有 Google 地图标记创建，直到 axios 承诺得到解决。您可以将所有这些抽象到另一种方法中，例如insertMarkers()

另外，请记住，您需要在应用程序/组件数据中定义estates，否则它不会是响应式的。

这是一个例子：

data() {
    return {
        mapName: "map",

        // Create the estate object first, otherwise it will not be reactive
        estates: {}
    }           
},

mounted() {
    this.fetchEstates();
    this.initMap();
},
methods: {
    fetchEstates: function(page = 1) {
        axios.get('/ajax', {
            params: {
                page
            }}).then((response) => {
                this.estates = response.data.data;

                // Once estates have been populated, we can insert markers
                this.insertMarkers();

                //pagination and stuff... 
            });
    },

    // Iniitialize map without creating markers
    initMap: function(){
        var mapOptions =
            {
                zoom : 6,
                center : {
                    lat:34.652500,
                    lng:135.506302
                }
            };

        var map = new google.maps.Map(document.getElementById(this.mapName), mapOptions);
    },

    // Helper method to insert markers
    insertMarkers: function() {
        var marker = new google.maps.Marker({
            map: map,
            icon: 'imgs/marker.png',
            url: "/pages/estates.id",
            label: {
                text: this.estates.price,
                color: "#fff",
            },
            position: {
                lat: this.estates.lat,
                lng: this.estates.lng
            }
        });

        google.maps.event.addListener(marker, 'click', function () {
            window.location.href = this.url;
        });
    }
},

更新：原来你还没有解决this.estates的数据结构问题。您似乎从端点接收数组而不是对象，因此this.estates 将返回一个数组，当然this.estates.lat 将是未定义的。

如果您想遍历整个数组，则必须在添加标记时使用this.estates.forEach() 遍历每个单独的庄园，即：

data() {
    return {
        mapName: "map",

        // Create the estate object first, otherwise it will not be reactive
        estates: {}
    }           
},

mounted() {
    this.fetchEstates();
    this.initMap();
},
methods: {
    fetchEstates: function(page = 1) {
        axios.get('/ajax', {
            params: {
                page
            }}).then((response) => {
                this.estates = response.data.data;

                // Once estates have been populated, we can insert markers
                this.insertMarkers();

                //pagination and stuff... 
            });
    },

    // Iniitialize map without creating markers
    initMap: function(){
        var mapOptions =
            {
                zoom : 6,
                center : {
                    lat:34.652500,
                    lng:135.506302
                }
            };

        var map = new google.maps.Map(document.getElementById(this.mapName), mapOptions);
    },

    // Helper method to insert markers
    insertMarkers: function() {

        // Iterate through each individual estate
        // Each estate will create a new marker
        this.estates.forEach(estate => {
            var marker = new google.maps.Marker({
                map: map,
                icon: 'imgs/marker.png',
                url: "/pages/estates.id",
                label: {
                    text: estate.price,
                    color: "#fff",
                },
                position: {
                    lat: estate.lat,
                    lng: estate.lng
                }
            });

            google.maps.event.addListener(marker, 'click', function () {
                window.location.href = this.url;
            });
        });
    }
},

【讨论】：

好的，我收到一条错误消息：SyntaxError: /var/www/html/laravel/resources/js/components/Index.vue: Unexpected token (222:35) 并显示插入功能？ imgur.com/a/3A4At4j
@Barbie 复制和粘贴时缺少大括号，因此initMap() 永远不会正确关闭。再检查一遍。我发布的代码在语法上是正确的。
检查了几次，但仍然一无所获...我更新了问题中的完整方法，我真的错过了什么吗？ :)
@Barbie 再看看你发的截图。你在insertMarkers: function(){ 之前缺少},。我不知道我能清楚多少
哦，真的很抱歉，真的是我的错误/错过。我现在纠正它。但仍然得到相同的错误，即undefined。还更新了问题中的代码。

【解决方案2】：

从我在您发布的屏幕截图中可以看到，this.estates 是一个对象数组？如果是这种情况，您需要使用 forEach 遍历数组

this.estates.forEach((estate, index) => { 
    console.log(estate.lat); 
    //handle each estate object here
});

如果您只对第一项感兴趣，或者像 this.estates[0].lat 那样使用数组中的第一项。

【讨论】：