如何根据 JSON 数据中的 lat 和 long 使地图居中，当单击标记时，会弹出一个弹出窗口并在 vueJS 中显示名称？

Posted 2023-02-22

【中文标题】如何根据 JSON 数据中的 lat 和 long 使地图居中，当单击标记时，会弹出一个弹出窗口并在 vueJS 中显示名称？

【英文标题】：How can I able to center the map according to lat and long from JSON data and when click on markers, a pop up come and display the name in vueJS?

【发布时间】：2018-04-24 11:26:57

【问题描述】：

我用于获取 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>

我需要根据 json 数据上显示的 lat 和 long 将地图居中，并且 此外，当我单击标记时，我需要在弹出窗口中显示名称。谁能帮我解决这个问题？

【问题讨论】：

还是没有运气？还在与谷歌地图集成进行详细说明？

@WaldemarIce 是的，先生！我被卡住了

【参考方案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>

【讨论】：

在我的脚本中哪里应用这些代码？你能建议吗

不，先生..上面没有做任何改变..我不能根据我的纬度和经度来居中地图..点击它时也会显示“点击我0”

先生，没有得到