如何使用v-modal从以下脚本发布lat和lng的值?
这是我的代码,将标记放在客户端的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值?
回答:
您遇到的主要问题是您的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>
以上是 如何使用v-modal从以下脚本发布lat和lng的值? 的全部内容, 来源链接: utcz.com/qa/260950.html