如何通过ajax请求获得的json数据使用vue js在谷歌地图上标记经纬度？

Posted 2023-02-22

【中文标题】如何通过ajax请求获得的json数据使用vue js在谷歌地图上标记经纬度？

【英文标题】：How to mark latitude and longitude on Google Maps using vue js by json data obtained by ajax request?

【发布时间】：2018-04-20 16:25:42

【问题描述】：

这是我使用 ajax 请求获取 json 数据的 vue js 脚本

    <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.. 我不知道如何解决同样的问题。请帮我解决

这是显示所有 JSON 数据的 html 代码

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

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

还有其他方法可以使用 google maps api 解决同样的问题吗？请帮我解决 我没有添加谷歌地图的js小提琴链接是https://jsfiddle.net/kzc26bgs/1/

【问题讨论】：

mounted() ?请改用mounted: function()

shuksin.ivan，这是有效的 javascript。 @coder，您使用的是单个文件组件和/或模块捆绑器吗？

提醒纬度和纬度来或不告诉我我会

哇。 vuejs 文档不包含那个新语法。

问题在于您的export。如果您没有使用 webpack 或 browserify 之类的模块捆绑器，那么您的代码将永远无法工作。它与 ajax 或 vue 或谷歌地图无关。

【参考方案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": "[e-mail]", "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);

                );

【讨论】：

怎么可能？我没有得到

你可以使用你的 ajax post insted 我的 ajax post change url 并传递数据获取成功函数数据到 for 循环它会自动放置标记

在挂载函数里面？

在 dom 加载时使用挂载函数，在 ajax 调用时使用此映射函数 k

对不起，还是没有得到