Javascript 在Vue/Laravel中使用google地图

正在尝试将GoogleMap实现到Vue组件中。但是有一段艰难的时光。实际上，没有错误。但也没有地图：）好的，我在下面试过的

在laravel blade中，我设置了api

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

---

从我们在评论中的讨论中，我意识到您的问题是因为

执行
initMap（）
时，仍然没有定义此.estate

。请记住，您正在使用异步操作（通过axios）来填充

this.estates

，因此在运行时它是未定义的。您可以做的是：

将映射初始化逻辑保留在

initMap（）中

移动所有谷歌地图标记创建，直到解决axios承诺。您可以将所有这些抽象到另一个方法中，例如

insertMarkers（）

另外，请记住，您需要在应用程序/组件数据中定义

estate

，否则它将不会是被动的

以下是一个例子：

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.estate

的数据结构问题。似乎您正在从端点而不是对象接收数组，因此

this.estates

将返回一个数组，当然

this.estates.lat

将是未定义的

如果要遍历整个数组，则必须使用

this.estates.forEach（）

遍历每个单独的estate，同时添加标记，即：

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;
            });
        });
    }
},

---

从您发布的屏幕截图中我可以看到，

this.estates

是一个对象数组？如果是这种情况，则需要使用

forEach

this.estate.forEach（（estate，index）=>{
控制台日志（state.lat）；
//在这里处理每个地产对象
});

---

或者使用数组中的第一项，如so

this.estates[0].lat

，如果您只对第一项感兴趣。

在这种情况下，您可能错误地使用了

computed

。我猜您希望在安装组件时执行

initMap（）

？如果从未在模板中引用

initMap

，则永远不会计算计算属性。另外，您返回的是void，这不是计算属性应该首先返回的。您尝试过现有的包吗？实际上，尝试创建自定义映射@GabMic@Terry请你再检查一遍，我更新了问题和代码。检查你的控制台日志。它说了什么？好的，我收到一个错误，上面写着：

SyntaxError:/var/www/html/laravel/resources/js/components/Index.vue:Unexpected token（222:35）

，它显示了插入函数@Barbie在复制和粘贴时缺少一个花括号，因此

initMap（）

永远不会正确关闭。再查一遍。我发布的代码在语法上是正确的。检查了几次，但仍然没有捕获任何内容。。。我更新了问题中的完整方法，我真的遗漏了什么吗？：）@芭比娃娃再次看到你发布的截图。您缺少

}，

在

插入标记：function（）{

之前。我不知道我能清楚多少哦，真的很抱歉，真的是我的错误/遗漏。我现在更正了它。但是仍然得到了相同的错误，即

未定义的
。还更新了问题中的代码。