2017-11-11 15 views
1

我用於獲取JSON數據並顯示地圖vueJS腳本我如何能夠根據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數據和 此外,當我點擊該標記,我需要在即將到來的彈出窗口中顯示名稱。可以請任何人幫我解決問題嗎?

+0

仍然沒有運氣?仍然詳細說明谷歌地圖集成? – WaldemarIce

+0

@WaldemarIce是的先生!我卡在 – coder

回答

0

我試圖落實到你的代碼

<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

哪裏應用這些代碼在我的腳本?你能否請建議 – coder

+0

我試圖把它實現到你的代碼 – piscu

+0

沒有先生..上面沒有做任何改變..我不能中心地圖根據我的緯度和長..還點擊它時顯示「點擊我0」 – coder

相關問題