Question

This is my code to place marker in the google maps by the client. How can I able to capture these values and post that values using 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>

My vue js code is

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

How can I able to capture lat and lng values and post that values using ajax request. It will be great if somebody please help me to achieve the same. I am able to place marker on the map. I need to post lat and lng values using vue js?

Answer 1

The main problem you have is that your Vue component and the map-related code is separate and you need to figure out a way of communicating between the map and the Vue component.

Typically you'd initialize the map within the Vue component so that the Vue component takes responsibility of the map and its data/events/etc.

I don't know too much about google maps API, but something like this should work:

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>

How can I post values of lat and lng using v-modal from the following script?

1 个答案: