ajax 요청으로 얻은 json 데이터로 vue js를 사용하여 Google지도에서 위도와 경도를 표시하는 방법은 무엇입니까?

Question

이 내 VUE의 JS 스크립트는 아약스 요청을 사용하여 JSON 데이터를 얻을 수 있습니다

<script> 
    new Vue({ 
    el: '#feed' , 
    data: { 
    details: [], 
    }, 
    mounted() { 
    this.$nextTick(function() { 
     var self = this; 
     var id = window.location.href.split('=').pop() 
      console.log(id) 
     $.ajax({ 
      url: "https://", 
      method: "GET", 
      dataType: "JSON", 
      success: function (e) { 
       if (e.status == 1) { 
        self.details = e.data; 
        console.log(e.data) 
       } 
       else 
       { 
        console.log('Error occurred');} 
      }, error: function(){ 
      console.log('Error occurred'); 
      } 
     }); 
    }) 
    }, 
}) </script> 



<script> 
export default { 
    name: 'google-map', 
    props: ['name'], 
    data: function() { 
    return { 
     mapName: this.name + "-map", 
     markerCoordinates: [{ 
     latitude: 51.501527, 
     longitude: -0.1921837 
     }], 
     map: null, 
     bounds: null, 
     markers: [] 
    } 
    }, 
    mounted: function() { 
    this.bounds = new google.maps.LatLngBounds(); 
    const element = document.getElementById(this.mapName) 
    const mapCentre = this.markerCoordinates[0] 
    const options = { 
     center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude) 
    } 
    this.map = new google.maps.Map(element, options); 
    this.markerCoordinates.forEach((coord) => { 
     const position = new google.maps.LatLng(coord.latitude, coord.longitude); 
     const marker = new google.maps.Marker({ 
     position, 
     map: this.map 
     }); 
    this.markers.push(marker) 
     this.map.fitBounds(this.bounds.extend(position)) 
    }); 
    } 
}; 
</script> 
<style scoped> 
.google-map { 
    width: 800px; 
    height: 600px; 
    margin: 0 auto; 
    background: gray; 
} 
</style> 

내가 catch되지 않은 구문 에러와 같은 오류를 얻을입니다 : 예기치 않은 토큰 수출 .. 내가 어떻게 같은 문제를 해결하기 위해 어떤 생각을받지하고 있습니다. 나를

해결하는 데 도움이 제발이 모든 JSON 데이터

<div class="m-single-article" id="feed"> 
<p>{{details.bussinessName}}</p> 
<p>{{details.pid}}</p> 
<p v-for="inv in details.inventory">{{inv}}</p> 
<p v-for="sub in details.sub_category">{{sub}}</p> 
<div class="google-map" :id="mapName"></div> 
</div> 

를 표시하는 내 HTML 코드입니다하지만 점점 오류입니다. 아무도 내 문제를 해결할 수 있도록 도와주세요. 위도와 경도를 Google지도에 표시하려면 어떻게해야합니까? 나는 vue js의 초보자입니다. 이 문제를 해결하도록 도와주세요.

Google지도 API를 사용하여 동일한 문제를 해결할 다른 방법이 있습니까? https://jsfiddle.net/kzc26bgs/1/

Answer 1

function initMap() { 
 
var c = [{"status": true, "data": {"pid": 5, "bussinessName": "Xavier Tailoring shop", "services": "All kind of stitching works", "inventory": [], "workHr": "Monday :9:00AM to 20:0PM,Thuesday :9:00AM to 20:0PM,Wednesday :9:00AM to 20:0PM,Tuesday : 9:00AM to 20:0PM,Friday :9:00AM to 20:0PM,Saturday :9:00AM to 20:0PM,Sunday :9:00AM to 20:0PM", "description": "All kind of stitching works", "category": 11, "sub_category": ["Veg Hotel"], "lat": 9.52436859, "lon": 76.82810117, "contactName": "xavier", "contactEmail": "harisxavier@gmail.com", "contactOfficeAddress": "koovapally perubara road", "contactNumber": "8592808201", "contactOfficeNumber": "8592808201", "state": "Kerala", "city": "Koovappally", "place": "Kanjirapally - Erumely Road", "pincode": 686518, "referer": 24, "link": 31, "views": 0, "package": 1, "listing_pic": "default", "website": "example.com"}}]; 
 
    var myLatLng = {lat:c[0].data.lat , lng:c[0].data.lon }; 
 

 
    var map = new google.maps.Map(document.getElementById('mapName'), { 
 
    zoom: 4, 
 
    center: myLatLng 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map, 
 
    title: 'Hello World!' 
 
    }); 
 
}

<div id="mapName" style="width:267px; height: 270px" /> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AddKEY&callback=initMap"> 
 
</script>

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('dvMap'), options); 

$.post("${pageContext.request.contextPath}/getorderlist.htm", { 
        aa : aa, 
        output : output, 

       }, function(data) {    

       }).done(function(data) { 
        //alert(data); 
        var json = JSON.parse(data); 


         //console.log(json); 

        for (var i = 0; i < json.length; i++) 
        { 

         var  
        png='http://maps.google.com/mapfiles/ms/icons/blue-dot.png'; 

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

          // Process multiple info windows 
          (function(marker, i) { 
           // add click event 
           google.maps.event.addListener(marker, 'click', function() { 
            infowindow = new google.maps.InfoWindow({ 
             content: json[k][i].address 
            }); 
            infowindow.open(map, marker); 
           }); 
          })(marker, i);        

         }       


       }).fail(function(xhr, textStatus, errorThrown) { 
       }).complete(function() { 
        $("#btn-save").prop("disabled", false); 

       });