我如何能夠根據JSON數據的緯度和長度來居中顯示地圖，當點擊標記時，彈出窗口會顯示vueJS中的名稱？

Question

我用於獲取JSON數據並顯示地圖vueJS腳本

<script> 
    new Vue({ 
    el: '#feed' , 
    data: { 
     data: [], 
    }, 
    mounted() { 
     this.$nextTick(function() { 
     var self = this; 
     var id = window.location.href.split('=').pop() 

     //this code 
     var options = { 
      zoom: 6, 
      center: new google.maps.LatLng(12.92, 77.25), // Centered 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: false 
     }; 

     // Init map 
     var map = new google.maps.Map(document.getElementById('mapName'), options); 
     console.log(id) 
     $.ajax({ 
      url: "https://n2s.herokuapp.com/api/post/get/10", 
      method: "GET", 
      dataType: "JSON", 
      success: function (e) { 
      if (e.status == 1) { 
       self.data = e.data; 
       console.log(e.data); 
       //use code 
       var i=0;  

       // Init markers 
       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(e.data.lat , e.data.lon), 
       map: map, 
       title: 'Click Me ' + i, 
       }); 

       // Process multiple info windows 
       (function(marker, i) { 
       // add click event 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow = new google.maps.InfoWindow({ 
        content: e.data.lat 
        }); 
        infowindow.open(map, marker); 
       }); 
       })(marker, i); 
      } else { 
       console.log('Error occurred');} 
      }, error: function(){ 
       console.log('Error occurred'); 
      } 
      }); 
     }) 
     }, 
    }) 
</script> 

我需要地圖中心按lat和長時間顯示在JSON數據和 此外，當我點擊該標記，我需要在即將到來的彈出窗口中顯示名稱。可以請任何人幫我解決問題嗎？

Answer 1

我試圖落實到你的代碼

<script> 
    new Vue({ 
    el: '#feed' , 
    data: { 
     data: [], 
    }, 
    mounted() { 
     this.$nextTick(function() { 
     var self = this; 
     var id = window.location.href.split('=').pop() 

     // Init map 
     var map; 

     var myLatlng = new google.maps.LatLng(12.92, 77.25); 
      function initMap() { 

        map = new google.maps.Map(document.getElementById('mapName'), { 
         center: myLatlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         mapTypeControl: false, 
         zoom: 6 
        }); 
    } 

initMap(); 


     console.log(id) 
     $.ajax({ 
      url: "https://n2s.herokuapp.com/api/post/get/10", 
      method: "GET", 
      dataType: "JSON", 
      success: function (e) { 
      if (e.status == 1) { 
       self.data = e.data; 
       console.log(e.data); 
       //use code 
       var i=0;  

       // Init markers 
       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(e.data.lat , e.data.lon), 
       map: map, 
       title: 'Click Me ' + i, 
       }); 

       // Process multiple info windows 
       (function(marker, i) { 
       // add click event 
       google.maps.event.addListener(marker, 'click', function() { 
       alert(e.data.bussinessName); 
       }); 
        infowindow.open(map, marker); 
       }); 
       })(marker, i); 
      } else { 
       console.log('Error occurred');} 
      }, error: function(){ 
       console.log('Error occurred'); 
      } 
      }); 
     }) 
     }, 
    }) 
</script>