如何使用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

回到顶部