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

Question

这是我的代码，用于在客户端的谷歌地图中放置标记。如何使用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>

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

我怎样才能捕获lat和lng值并使用ajax请求发布该值。如果有人请帮我实现同样的目标，那将是很棒的。我可以在地图上放置标记。我需要使用vue js发布lat和lng值？

Answer 1

您遇到的主要问题是您的Vue组件和与地图相关的代码是独立的，您需要找到一种在地图和Vue组件之间进行通信的方法。

通常，您在Vue组件中初始化地图，以便Vue组件负责地图及其数据/事件/等。

我不太了解谷歌地图API，但这样的事情应该有效：

const uluru = {
  lat: -25.363,
  lng: 131.044
};

const app = new Vue({
  el: '#app',
      
  data: {
    lat: 0,
    lng: 0,
  },

  methods: {
    createMap() {
      this.map = new google.maps.Map(this.$refs.map, {
        zoom: 8,
        center: uluru,
        clickableIcons: true,
      });

      google.maps.event.addListener(this.map, 'click', e => {
        if (!this.map.getClickableIcons()) {
          return;
        }
            
        this.lat = e.latLng.lat();
        this.lng = e.latLng.lng();
                
        // add your new marker with this info.
        const marker = new google.maps.Marker({
          position: {
            lat: this.lat,
            lng: this.lng,
          },
          map: this.map,
          draggable: true,
        });

        this.map.clickableIcons = false;
              
        // get latitude and longitude after dragging:
        google.maps.event.addListener(marker, 'dragend', marker => {
          this.lat = marker.latLng.lat();
          this.lng = marker.latLng.lng();
        });
      });
    },
    
    submit() {
      // Do your AJAX request here with this.lat and this.lng
      console.log('AJAX request');
      console.log('Lat: ' + this.lat);
      console.log('Lng: ' + this.lng);
    },
  },
});

function ready() {
  app.createMap();
}

.map {
  width: 400px;
  height: 200px;
}

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu8vqg35dD4fNfxlI8ICoycehbL0F6bis&callback=ready"></script>

<div id="app">
  <button @click="submit">Submit</button>
  lat: {{ lat }}, lng: {{ lng }}
  
  <div class="map" ref="map"></div>
</div>