如何通过ajax请求得到的json数据使用vue js在Google地图上标注经纬度？

Question

这是我的 vue js 脚本，用于使用 ajax 请求

获取 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>

我收到错误消息，如 Uncaught SyntaxError: Unexpected token export.. 我不知道如何解决同样的问题。请帮我解决

这是我的 html 代码，用于显示所有 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>

但是我遇到了错误。谁能帮我解决我的问题。我怎样才能让纬度和经度显示在 google 地图上。我是 vue js 的初学者。请帮我解决这个问题。

有没有其他方法可以使用 google 地图 api 来解决同样的问题？请帮我解决 我的 js fiddle link 没有添加 google 地图是 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);

                });