使用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
                    });
                }

            },