我无法在 vue js 中传递 lat 和 lng 的值?
Posted
技术标签:
【中文标题】我无法在 vue js 中传递 lat 和 lng 的值?【英文标题】:I am not able to pass values of lat and lng in vue js? 【发布时间】:2018-05-28 04:35:17 【问题描述】:我正在使用 vue js,我可以传递用户名。但我无法传递 lat 和 lng 值。检查时,我可以发布用户名,但 lat 和 lng 为空。
我的html代码是
<form id="submitBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<div id="map"></div>
<input name="lat" type="text" id="lat" v-model="lat"><br>
<input name="lng" type="text" id="lng" v-model="lng">
<input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4"/>
</form>
点击地图时。我可以加载 lat 和 lng 值,但我不能通过
我加载地图值的脚本是
<script>
//map.js
//Set up some of our variables.
var map; //Will contain map object.
var marker = false; ////Has the user plotted their location marker?
//Function called to initialize / create the map.
//This is called when the page has loaded.
function initMap()
//The center location of our map.
var centerOfMap = new google.maps.LatLng(52.357971, -6.516758);
//Map options.
var options =
center: centerOfMap, //Set center.
zoom: 7 //The zoom value.
;
//Create the map object.
map = new google.maps.Map(document.getElementById('map'), options);
//Listen for any clicks on the map.
google.maps.event.addListener(map, 'click', function(event)
//Get the location that the user clicked.
var clickedLocation = event.latLng;
//If the marker hasn't been added.
if(marker === false)
//Create the marker.
marker = new google.maps.Marker(
position: clickedLocation,
map: map,
draggable: true //make it draggable
);
//Listen for drag events!
google.maps.event.addListener(marker, 'dragend', function(event)
markerLocation();
);
else
//Marker has already been added, so just change its location.
marker.setPosition(clickedLocation);
//Get the marker's location.
markerLocation();
);
//This function will get the marker's current location and then add the lat/long
//values to our textfields so that we can save the location.
function markerLocation()
//Get location.
var currentLocation = marker.getPosition();
//Add lat and lng values to a field that we can save.
document.getElementById('lat').value = currentLocation.lat(); //latitude
document.getElementById('lng').value = currentLocation.lng(); //longitude
//Load the map when the page has finished loading.
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
我的vue js代码是
<script>
submitBox = new Vue(
el: "#submitBox",
data:
lat : '',
lng : '',
username: '',
,
methods:
handelSubmit: function(e)
var vm = this;
data = ;
data['lat'] = this.lat;
data['lng'] = this.lng;
data['username'] = this.username;
$.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")
else
vm.response = e;
alert("Failed")
);
return false;
,
);
</script>
我可以得到用户名。但我得到 lat 和 lng 的空值。
但是当我点击地图时,我可以打印 LAT 和 LNG 值,但我无法传递相同的值。谁能帮我解决这个问题。
【问题讨论】:
我认为这发生在 b/c document.getElementById('lat').value = currentLocation.lat() 没有更新 vue 数据中的纬度。我认为使用 $refs 绑定它是可行的方法。 【参考方案1】:v-model 无法识别您的“lat”输入字段的 value 属性已以编程方式更改。相反,您可以这样做:
<input name="lat" type="text" id="lat" ref="myLatField" v-model="lat">
methods:
handelSubmit: function(e)
var vm = this;
data = ;
data['lat'] = this.$refs.myLatField.value;
...
【讨论】:
先生,如果我在输入用户名后点击地图,我就会得到价值。如果我在地图上键入然后输入 username ,则值不会通过以上是关于我无法在 vue js 中传递 lat 和 lng 的值?的主要内容,如果未能解决你的问题,请参考以下文章
Django:如何将python变量值传递给javascript文件?
防止 geocomplete 从 lat lng 坐标返回街道地址