Google 使用 Vue 的地图 API 不会显示来自数据库值的标记

Question

我有一个包含相应坐标和名称的数据库。我正在通过执行 axios 请求来获取。我还有一个静态坐标，它将成为它的中心。问题是我的 api 获胜节目的坐标标记。我什至记录了坐标，它显示了正确的坐标。这好像是什么问题？

我的方法

 data(){
            return{
                clinics:[],
                property:'',
            }
        },
 methods:{
            initMap(){
                //center
                this.property = {lat: 1.28237, lng: 103.783098};
                // const infowindow = new google.maps.InfoWindow();

                for (var i = 0; i < this.clinics.data.length; i++) {
                    var coords = this.clinics.data[i].coord;
                    console.log(coords['lat'])
                    console.log(coords['lng'])
                    var latLng = new google.maps.LatLng(coords['lat'],coords['lng']);
                    var markers = new google.maps.Marker({
                        position: latLng,
                        map: map
                    });
                }
                const map = new google.maps.Map(document.getElementById('map'), {zoom: 17, center: this.property})
                const circle = new google.maps.Circle({
                    map: map,
                    radius: 200,    
                    fillColor: 'blue',
                    center:{lat: 1.28237, lng: 103.783098}
                }); 
                const marker = new google.maps.Marker({position: this.property, map: map});
            },
        },

示例控制台输出

app.js:1942 103.9056393
app.js:1941 1.307353803
app.js:1942 103.7845484
app.js:1941 1.334724904

来自我的 api

的 axios 示例响应

{
  "data": [
    {
      "coord": {
        "lat": 1.307476844,
        "lng": 103.7601573
      },
      "clinic": "Chen Clinic"
    },
   ]
}

我得到了什么（缩小表示没有标记）

Answer 1

对我来说似乎是个小错误。在放置标记之前需要先声明静态坐标和中心才能使其工作。

 initMap(){
                //center
                this.property = {lat: 1.28237, lng: 103.783098};
                // const infowindow = new google.maps.InfoWindow();

                const map = new google.maps.Map(document.getElementById('map'), {zoom: 17, center: this.property})
                const circle = new google.maps.Circle({
                    map: map,
                    radius: 200,    
                    fillColor: 'blue',
                    center:{lat: 1.28237, lng: 103.783098}
                }); 
                const marker = new google.maps.Marker({position: this.property, map: map});

                for (var i = 0; i < this.clinics.data.length; i++) {
                    var coords = this.clinics.data[i].coord;
                    console.log(coords['lat'])
                    console.log(coords['lng'])
                    var latLng = new google.maps.LatLng(coords['lat'],coords['lng']);
                    var markers = new google.maps.Marker({
                        position: latLng,
                        map: map
                    });
                }

            },

Google 使用 Vue 的地图 API 不会显示来自数据库值的标记

Google maps API using Vue wont display markers from database value

javascript

google-maps

google-maps-api-3

google-maps-markers

vue.js