如何使用v-modal從以下腳本發佈lat和lng的值？

-1

這是我的代碼，將標記放在客戶端的google地圖中。我如何能夠捕獲這些值並使用vue js發佈這些值？如何使用v-modal從以下腳本發佈lat和lng的值？

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

我如何能捕捉緯度和經度值和崗位，重視使用Ajax請求。如果有人請幫助我實現這一目標，那將會很棒。我可以在地圖上放置標記。我需要使用vue js發佈lat和lng值？

來源

2017-12-18 coder

你爲什麼不換地圖到Vue的成分，使它您的主要Vue組件的子項，並通過從地圖組件發出事件來公開經緯度數據？或者只是從Vue組件內初始化映射，以便組件可以訪問它。讓Vue組件一起工作，而不是試圖將數據壓入你的Vue組件實例。 –

可以請你展示如何實現相同？ – coder

您也可以從問題中移除您的Google地圖API密鑰。 –

您遇到的主要問題是您的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>

來源

2017-12-18 05:48:35

如何使用v-modal從以下腳本發佈lat和lng的值？

回答

相關問題