我如何能够根据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>