Javascript 如何使用以下脚本中的v-modal发布lat和lng的值？

这是我的代码，可以通过客户端在google地图中放置标记。如何使用vue js捕获这些值并发布这些值

<script>
 function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: uluru,
    clickableIcons: true,
  });

  google.maps.event.addListener(map, 'click', function(e) {

    if (map.getClickableIcons()) {
      var Latitude = e.latLng.lat();
      var Longitude = e.latLng.lng();
      // add your new marker with this info.
      var marker = new google.maps.Marker({
        position: {
          lat: Latitude,
          lng: Longitude
        },
        map: map,
        draggable: true,
      });
      map.clickableIcons = false;
      // get latitude and longitude after dragging:
      google.maps.event.addListener(marker, 'dragend', 
      function(marker){
           var latLng = marker.latLng; 
           currentLatitude = latLng.lat();
           currentLongitude = latLng.lng();

 }); 


    }
  });
}
</script>

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu8vqg35dD4fNfxlI8ICoycehbL0F6bis&callback=initMap">
</script>

函数initMap（）{
var uluru={
lat:-25.363，
液化天然气：131.044
};
var mapDiv=document.getElementById（'map'）；
var map=new google.maps.map（mapDiv{
缩放：8，
中心：乌卢鲁，
可点击图标：正确，
});
google.maps.event.addListener（映射，'click'，函数（e）{
if（map.getClickableIcons（））{
var纬度=e.latLng.lat（）；
var经度=e.latLng.lng（）；
//使用此信息添加新标记。
var marker=new google.maps.marker({
职位：{
纬度，
经度
},
地图：地图，
真的，
});
map.clickableIcons=false；
//拖动后获取纬度和经度：
google.maps.event.addListener（标记'dragend'，
功能（标记器）{
var latLng=marker.latLng；
currentLatitude=latLng.lat（）；
currentLength=latLng.lng（）；
}); 
}
});
}

我的vue js代码是

 <script>
submitBox = new Vue({
el: "#submitBox",
  data: {
   articles: [],
   services: [],
   lat : '',
   lng : '',
   username: '',
   category: '',
   subcategory: [],

  },
 methods: {
     handelSubmit: function(e) {
           var vm = this;
           data = {};
           data['lat'] = this.lat;
           data['lng'] = this.lng;
           data['username'] = this.username;
           data['category'] = this.category;
           data['subcategory'] = this.subcategory;
            $.ajax({
              url: 'http://127.0.0.1:8000/api/add/post/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
              {
               alert("Success")

              window.location.href= "https://localhost/n2s/registersuccess.html";
            }
              else {
                vm.response = e;

               alert(" Failed") 
              }
          }
            });
            return false;
}
},
});
         </script>

submitBox=新的Vue({
el:#提交箱“，
数据：{
第[…]条，
服务：[]，
拉丁语：''，
液化天然气：，
用户名：“”，
类别：“”，
子类别：[]，
},
方法：{
handelSubmit:函数（e）{
var vm=这个；
数据={}；
数据['lat']=this.lat；
数据['lng']=this.lng；
数据['username']=this.username；
数据['category']=this.category；
数据['subcategory']=this.subcategory；
$.ajax({
网址：'http://127.0.0.1:8000/api/add/post/',
数据：数据，
类型：“POST”，
数据类型：“json”，
成功：职能（e）{
如果（如状态）
{
警惕（“成功”）
window.location.href=”https://localhost/n2s/registersuccess.html";
}
否则{
vm.response=e；
警报（“失败”）
}
}
});
返回false；
}
},
});

---

如何使用ajax请求捕获lat和lng值并发布这些值。如果有人能帮我实现同样的目标，那就太好了。我能在地图上放置标记。我需要使用vue js发布lat和lng值？

您的主要问题是，您的vue组件和地图相关代码是分开的，您需要找出地图和vue组件之间的通信方式

通常，您需要在Vue组件中初始化映射，以便Vue组件负责映射及其数据/事件等

我对google maps API了解不多，但类似的东西应该可以工作：

constuluru={
lat:-25.363，
液化天然气：131.044
};
const app=新的Vue({
el:“#应用程序”，
数据：{
纬度：0，
液化天然气：0，
},
方法：{
createMap（）{
this.map=new google.maps.map（this.$refs.map{
缩放：8，
中心：乌卢鲁，
可点击图标：正确，
});
google.maps.event.addListener（this.map，'click'，e=>{
如果（！this.map.getClickableIcons（））{
返回；
}
this.lat=e.latLng.lat（）；
this.lng=e.latLng.lng（）；
//使用此信息添加新标记。
const marker=new google.maps.marker({
职位：{
拉特：这个，拉特，
液化天然气：这个，液化天然气，
},
map:this.map，
真的，
});
this.map.clickableIcons=false；
//拖动后获取纬度和经度：
google.maps.event.addListener（marker'dragend'，marker=>{
this.lat=marker.latLng.lat（）；
this.lng=marker.latLng.lng（）；
});
});
},
提交（）{
//使用this.lat和this.lng在此处执行AJAX请求
log（'AJAX请求'）；
console.log（'Lat:'+this.Lat）；
console.log（'Lng:'+this.Lng）；
},
},
});
函数就绪（）{
app.createMap（）；
}

.map{
宽度：400px；
高度：200px；
}

提交
lat:{{lat}，lng:{{lng}

为什么不将地图包装到Vue组件中，使其成为主Vue组件的子组件，并通过从地图组件发出事件来公开纬度和经度数据？或者只是从Vue组件中初始化映射，以便该组件可以访问它。让Vue组件协同工作，而不是试图将数据硬塞进Vue组件实例中。请说明如何实现同样的效果？此外，您可能希望从问题中删除您的google maps API密钥。ohk。。添加它只是为了帮助那些最愿意使用

google.maps

的人。maps函数是异步的，因此可以调用从

google.maps

事件处理程序请求服务器的函数。不要期望得到回应。